0

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);
2

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 } }
| improve this answer | |
  • Thank you!! I got this json now: const var = {"page":"1","firstName":"j","lastName":"k","company":"","reqValidation":true,"notes":"","roles":[],"level":"beginner","file":""} . When I try to access a JSON key like - var['page'] var.page , it gives me undefined. – SfdcBat Apr 14 at 18:18
  • 1
    @SfdcBat You shouldn't have any JSON, it should be an object? I think your problem might be elsewhere. – sfdcfox Apr 14 at 18:42
  • 1
    @SfdcBat In your event handler, event.detail.page for example, should return "1". – sfdcfox Apr 14 at 18:43
1

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

| improve this answer | |
  • 1
    There's no need to unescape it... just fix the source of the problem. – sfdcfox Apr 14 at 18:10
  • @sfdcfox agreed I guess, I just jumped on the gun – Pranay Jaiswal Apr 14 at 18:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.