CODEWITHSUNDEEP
javascriptjson
Justin
Justin

Reputation: 51

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

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

Upvotes: 2

Views: 2329

Answers (2)

Kasunaz
Kasunaz

Reputation: 593

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.

enter image description here

Upvotes: 1

Dai
Dai

Reputation: 155433

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.

Upvotes: 1

Related Questions