JSON.parse() output changes if assigned to a variable

Question

I am developing a website where tickets for events can be bought. After selecting a ticket it is in the shopping cart. I have a sessionService.ts which basically is a Map<string, any> that reads/writes from/to the local storage. Storing the map as a JSON string works perfectly but when I load the data from the storage and try to parse the JSON string to the Map the data is not consistent anymore.

console.log(JSON.parse(data)) shows the correct values but let x = JSON.parse(data); console.log(x); shows manipulated data.

I tried recreating the problem on Stackblitz but I was unable to do that.


export class Ticket {
  public id: number;
  public created: Date;

  constructor(
    public reservation: boolean,
    public price: number,
    public section: number,
    public row: number,
    public seat: number,
    public event: number | Event) {
  }
}

private testParsing(){
    const custom = '[["Tickets",[{"reservation":true,"price":10,"section":null,"row":10,"seat":10,"event":5,"id":1,"created":"2019-06-14T14:16:17.144Z"}]]]';
    console.log('String to parse: ', custom);
    console.log('String parsed directly to console: ', JSON.parse(custom));
}

console.log('String to parse: ', custom); will display the correct values.

console.log('String parsed directly to console: ', JSON.parse(custom)); here the output is worng id = 0, row = null, seat = null.

Logs from code:

What causes this problem and how can I solve it?

In your reported code there's not the `console.log` that is causing problems in your screenshoot — Christian Vincenzo Traina, Jun 14 '19 at 14:54
If you can't reproduce the problem in stackblitz then something is different and you should isolate that difference. Since your code here doesn't constitute a [mcve] there's nothing people can do but guess. My guess: you are not aware that [`console.log` on an object value might show you a "live" version of the object and not the state of the object as it was when you logged it](https://developer.mozilla.org/en-US/docs/Web/API/Console/log#Logging_objects) — jcalz, Jun 14 '19 at 14:57
Please add a [mcve] that shows the actual problem, because this works exactly as expected: https://jsfiddle.net/9zft31jq/ — Andreas, Jun 14 '19 at 15:00
custom is not format Json, can you try this : ```custom = '{"Tickets":{"reservation":true,"price":10,"section":null,"row":10,"seat":10,"event":5,"id":1,"created":"2019-06-14T14:16:17.144Z"}}'; ``` — Hamza Neffati, Jun 14 '19 at 15:00
I tried the two variations on JavaScript, and both worked, I think this a problem with angular. — Krishanu, Jun 14 '19 at 15:09
`console.log(x)` does not have to stringify `x` right away. If that is causing you trouble, do `console.log(String(x))`. — Mike Samuel, Jun 14 '19 at 16:34

score 0 · Answer 1 · answered Jun 30 '19 at 14:08

0

The issue is that it is a nested structure, try using JSON.parse(JSON.stringify(custom)) should get the same result. I was able to reproduce your problem and solve with this method in my console.

answered Jun 30 '19 at 14:08

Michael

4,538
5
31
58

score -2 · Answer 2 · answered Nov 22 '22 at 13:20

-2

It is because of value reference, of x to be manipulated in future makes json.parse work incorectly. Try creating reference variable.

answered Nov 22 '22 at 13:20

Vaibhav Kharatmal

1
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 27 '22 at 02:53

JSON.parse() output changes if assigned to a variable

2 Answers2