Why is JSON.parse() not parsing inner array of JSON object?

Question

Does anyone know why my JSON.parse() is not working correctly? I have tried all the debug tools out there but it's not parsing the array.

My code:

console.log(typeof(localStorage.array));
console.log(localStorage.array);
localStorageArray = JSON.parse(localStorage.array);
console.log(localStorageArray);

The console:

String //line 1
[[{"color":"#000000","teacher":"ELA","tasks":[[{"selection":"homework","name":"HW 1","date":"2020-05-15","time":"16:05","marked":false}]]}]] //line 2
Array(1)
0: Array(1)
0:
color: "#000000"
tasks: Array(0)
length: 0
__proto__: Array(0)
teacher: "ELA"
__proto__: Object
length: 1
__proto__: Array(0)
length: 1
__proto__: Array(0) //The main thing here is that tasks.length == 0

btw, typeof in JavaScript doesn't need parentheses, you can use just console.log( typeof foo ) instead of console.log( typeof(foo) ). — Dai
– Dai, Commented May 15, 2020 at 20:54

2 revs · Accepted Answer · 2020-05-17 00:35:38Z

1

I have tried out your example with the chrome (Version 81.0.4044.138 (Official Build) (64-bit)) browser and here is the result I am getting.

Here is a picture of local storage instance that I have stored.

Here is a picture of the 4 steps which you have tried out.

In order to access the tasks array, I have used this command.

console.log(localStorageArray[0][0]['tasks']);

Here is the full code which is have used to get this result.

localStorage.setItem('array','[[{"color":"#000000","teacher":"ELA","tasks":[[{"selection":"homework","name":"HW 1","date":"2020-05-15","time":"16:05","marked":false}]]}]]');

console.log(typeof(localStorage.array));
console.log(localStorage.array);
let localStorageArray = JSON.parse(localStorage.array);
console.log(localStorageArray);
console.log(localStorageArray[0][0]['tasks']); // to access the tasks

the console:

// second line result
string 


// third line result
[[{"color":"#000000","teacher":"ELA","tasks":[[{"selection":"homework","name":"HW 1","date":"2020-05-15","time":"16:05","marked":false}]]}]] 


 // 4th and 5th line results
0: Array(1)
0:
color: "#000000"
tasks: Array(1)
0: Array(1)
0: {selection: "homework", name: "HW 1", date: "2020-05-15", time: "16:05", marked: false}
length: 1
__proto__: Array(0)
length: 1
__proto__: Array(0)
teacher: "ELA"
__proto__: Object
length: 1
__proto__: Array(0)
length: 1
__proto__: Array(0) 


// 6th line result
0: Array(1)
0:
date: "2020-05-15"
marked: false
name: "HW 1"
selection: "homework"
time: "16:05"
__proto__: Object
length: 1
__proto__: Array(0)
length: 1
__proto__: Array(0)

I have tried out your issue within the HTML file as well. It's working fine for me.

Here is the HTML code which I have tried out.

<!doctype html>
<html lang="en">
<body>
  <script >
    localStorage.setItem('array','[[{"color":"#000000","teacher":"ELA","tasks":[[{"selection":"homework","name":"HW 1","date":"2020-05-15","time":"16:05","marked":false}]]}]]');

    console.log(typeof(localStorage.array)); // line 01
    console.log(localStorage.array); // line 02

    let localStorageArray = JSON.parse(localStorage.array);
    console.log(localStorageArray); // line 03
    console.log(localStorageArray[0][0]['tasks']); //line 04
  </script>
  <div>web site working</div>
</body>
</html>

Here is the output that I'm getting.

edited May 17, 2020 at 0:35

community wiki

2 revs
kmkm

Sign up to request clarification or add additional context in comments.

3 Comments

Justin Over a year ago

Yea that's an issue too

Kasunaz Over a year ago

How do you handle JS in HTML file @Justin?

Kasunaz Over a year ago

@Justin. I have updated the answer. Even I have tried out with the HTML file and script tags, result is same. maybe this issue is because of your browser or it's version I think. Please check this HTML is working for you.

Dai · Accepted Answer · 2020-05-15 20:59:25Z

1

The localStorage object has custom property getters/setters that don't behave like normal JavaScript object properties.

This is explained here (emphasis mine):

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

The keys and the values are always strings (note that, as with objects, integer keys will be automatically converted to strings).

So when you retrieve a value from a localStorage property it will always be returned as a string, even if you just set a property with an object value.

You should prefer the getItem and setItem functions instead to avoid this automatic string conversion.

answered May 15, 2020 at 20:59

Dai

157k31 gold badges314 silver badges436 bronze badges

5 Comments

Justin Over a year ago

Doesn't seem to be working when I tried, is it maybe because my JSON array is a mess?

Dai Over a year ago

@Justin Possibly! I suggest you repost your question with the code you use to generate the Array in the first place. And please also add a screenshot showing the output in your browser's console because the Array(1)-etc output is meaningless without knowing what the output refers to.

Justin Over a year ago

So apparently it's not the issue of the array, but it's because the variable can't really store.

Justin Over a year ago

JSON.parse(localStorage.array) returns properly, but when I use localStorageArray = JSON.parse(localStorage.array), that's when the problem happens

Dai Over a year ago

@Justin Where - or how - is localStorageArray declared? What happens if you use var localStorageArray first? Is it in a closure? What does your JavaScript debugger say?

Collectives™ on Stack Overflow

Why is JSON.parse() not parsing inner array of JSON object?

2 Answers 2

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related