Cannot get serialized data back into referenceable json object

Question

I get a JSON response back from firebase (cloud DB from google) with users data that i am saving in sessionStorage of the browser using JSON.stringify .

When i try to parse that data back out into a JSON object using JSON.parse so that i can reference the key/value pairs inside the JSON structure, i keep getting back text or a blank object in console.

I can stringify and parse it back and forth and log that, but i can't get it to parse into a "pretty JSON object" like i would normally get back from firebase. (where you click it in console and it will expand the tree of the JSON)

function renderLabsCharts(doc){
       var tmpDoc = sessionStorage.getItem('doc1');
       console.log('tempdoc ' + tmpDoc)
       var tmpJson = JSON.parse(tmpDoc);
       console.log('stringy temp doc'+JSON.stringify(tmpDoc))
       var ans = tmpJson[0];
       console.log('ans ' + ans)
       console.log('tmpjson ' + tmpJson)



        var labTime = tmpJson.labTestDate;
        console.log('labTime ' + labTime)
        labTime = JSON.stringify(labTime)
        console.log('labTime '+JSON.stringify(labTime))
         var labTimeDate = labTime.toDate();

Log Results

tempdoc {"labName":"LabCorp","labResult":"111","labTestDate":{"seconds":4100775060,"nanoseconds":0},"labTestName":"EST SENSITIVE (E2)","labUnits":"mL","stdRange":"a3333","uid":"WYqIp9f0dJR8F7OJrMAsk2if6as1"}
appLabs.js:499 stringy temp doc"{\"labName\":\"LabCorp\",\"labResult\":\"111\",\"labTestDate\":{\"seconds\":4100775060,\"nanoseconds\":0},\"labTestName\":\"EST SENSITIVE (E2)\",\"labUnits\":\"mL\",\"stdRange\":\"a3333\",\"uid\":\"WYqIp9f0dJR8F7OJrMAsk2if6as1\"}"
appLabs.js:501 ans undefined
appLabs.js:502 tmpjson [object Object]
appLabs.js:507 labTime [object Object]
appLabs.js:509 labTime "{\"seconds\":4100775060,\"nanoseconds\":0}"
appLabs.js:510 Uncaught TypeError: labTime.toDate is not a function
    at renderLabsCharts (appLabs.js:510)
    at HTMLFormElement.<anonymous> (appLabs.js:209)

When i try to access a key/value pair of the JSON object, i get error because it is not defined.

Answer 1

labTime is already in JavaScript object notation, you are calling stringify again, so labTime is a string not JSON, so obviously it is an error.

Corrected Code

    var labTime = tmpJson.labTestDate;
    var labTimeSeconds = labTime.seconds;

    //convert to date here

Answer 2

While the previous answer point out there is to toDate function in the object, I would like to share another thing about the console.log.

The reason you keep getting blank object in console is that you use + sign in console.log('string ' + object) function.

Javascript does the implicit type conversion when it saw a syntax like 'string' + , it's equal to the string concatenation for Javascript. Therefore it turns the object into String.

More : MDN Arithmetic operators Languages

You can print the actual object tree in this way console.log('some text:', object) instead.

 function renderLabsCharts(doc){ var tmpDoc = '{"labName":"LabCorp","labResult":"111","labTestDate":{"seconds":4100775060,"nanoseconds":0},"labTestName":"EST SENSITIVE (E2)","labUnits":"mL","stdRange":"a3333","uid":"WYqIp9f0dJR8F7OJrMAsk2if6as1"}'; console.log('tempdoc ' + tmpDoc); var tmpJson = JSON.parse(tmpDoc); // console.log('stringy temp doc'+JSON.stringify(tmpDoc)) // var ans = tmpJson[0]; // console.log('ans ' + ans) console.log('tmpjson :' , tmpJson) var labTime = tmpJson.labTestDate; console.log('labTime :' , labTime) // labTime = JSON.stringify(labTime) // console.log('labTime '+JSON.stringify(labTime)) var labTimeDate = labTime.toDate(); } renderLabsCharts();