Reading a JSON structure in Javascript

Question

I am trying to read this json string in Javascript so that I can access its node. However I get undefined.

const jsonStr = '{"data":"{\"page\":\"1\",\"firstName\":\"c\",\"company\":\"\",\"reqValidation\":false,\"notes\":\"\",\"roles\":[],\"level\":\"beginner\"}"}';

I am trying to read the data in JS using :

jsonStr.data or jsonStr.['data'] gives me undefined.

I tried to use JSON.parser(jsonStr);, I get :

   Uncaught SyntaxError: Unexpected token p in JSON at position 11
        at JSON.parse (<anonymous>)

The JSON is produced using below. The data part is what I am trying to read in another JS file.

 const data = JSON.stringify({
            page: "1", firstName: this.firstName, lastName: this.lastName, company: this.company, reqValidation: isValid,
            notes: this.notes, roles: this.roles
        });
        const nextEvnt = new CustomEvent('initiate', {
            detail: { data }
        });
        this.dispatchEvent(nextEvnt);

Answer 1

Data can be passed through as an object, so no need to stringify. Your main problem is this:

{ data }

This creates a new object with an attribute data with the contents stringified (again). This double-encoding is what's causing you grief. Instead:

    const nextEvnt = new CustomEvent('initiate', {
        detail: data
    });

Or, even better, just use the original object:

const nextEvnt = new CustomEvent('initiate', {
  detail: {
        page: "1", firstName: this.firstName, lastName: this.lastName, company: this.company, reqValidation: isValid,
        notes: this.notes, roles: this.roles
    } });

Here's a quick demonstration of how the object notation screws things up:

var x = { a: 5, b: 10 }
var y = JSON.stringify(x); // { "a": 5, "b": 10 }
var z = JSON.stringify({x}); // { "x": { "a": 5, "b": 10 } }

Answer 2

jsonStr is a json. And data inside is also json. Thus

'{"data":"{\"page\":\"1\",\"firstName\":\"c\",\"company\":\"\",\"reqValidation\":false,\"notes\":\"\",\"roles\":[],\"level\":\"beginner\"}"}';

is basically escapped json. You have to unescape it.

const jsonStr = unescape('{"data":"{\"page\":\"1\",\"firstName\":\"c\",\"company\":\"\",\"reqValidation\":false,\"notes\":\"\",\"roles\":[],\"level\":\"beginner\"}"}');

Playground link : https://developer.salesforce.com/docs/component-library/tools/playground/JCjU-jCmd/1/edit