[Javascript] JSON.parse API

JSON (JavaScript Object Notation) is a standard method to serialize JavaScript objects and is commonly used to transfer data from the server to the browser. The browser has a JSON API that allows you to parse the JSON string into a JavaScript object. This API allows you to customize the parsing behavior very specifically as well.

 

If you get a string which represent an json object, you can use JSON.parse to parse the string:

var input = '[{"id":1,"title":"Gone with the Wind","publishDate":"1936-06-10T00:00:00.000Z","related":[80,3]},{"id":2,"title":"Freelancer","publishDate":"2015-08-11T00:00:00.000Z","related":[45,89]},{"id":3,"title":"A Christmas Carol","publishDate":"1843-12-19T00:00:00.000Z","related":[20,33]},{"id":4,"title":"The Cat in the Hat","publishDate":"1957-03-12T00:00:00.000Z","related":[50,10]}]'
var res = JSON.parse(input);
console.log(res);

/*
[[object Object] {
  id: 1,
  publishDate: "1936-06-10T00:00:00.000Z",
  related: [80, 3],
  title: "Gone with the Wind"
}, [object Object] {
  id: 2,
  publishDate: "2015-08-11T00:00:00.000Z",
  related: [45, 89],
  title: "Freelancer"
}, [object Object] {
  id: 3,
  publishDate: "1843-12-19T00:00:00.000Z",
  related: [20, 33],
  title: "A Christmas Carol"
}, [object Object] {
  id: 4,
  publishDate: "1957-03-12T00:00:00.000Z",
  related: [50, 10],
  title: "The Cat in the Hat"
}]
*/

 

JSON.parse(input, reviver), function can take a second object which is a reviver function:

for example, you can to parse this string:

var input = '[{"id":1,"title":"Gone with the Wind","publishDate":"1936-06-10T00:00:00.000Z","related":[80,3]},{"id":2,"title":"Freelancer","publishDate":"2015-08-11T00:00:00.000Z","related":[45,89]},{"id":3,"title":"A Christmas Carol","publishDate":"1843-12-19T00:00:00.000Z","related":[20,33]},{"id":4,"title":"The Cat in the Hat","publishDate":"1957-03-12T00:00:00.000Z","related":[50,10]}]'

to:

var expected = [
    {id: 1, title: 'Gone with the Wind', publishDate: new Date('1936-06-10'), related: [80, 3]},
    {id: 2, title: 'Freelancer', publishDate: new Date('2015-08-11'), related: [45, 89]},
    {id: 3, title: 'A Christmas Carol', publishDate: new Date('1843-12-19'), related: [20, 33]},
    {id: 4, title: 'The Cat in the Hat', publishDate: new Date('1957-03-12'), related: [50, 10]},
  ]

The difference is 'publishDate' is a Date object instead of string.

 

So what we can do is:

var input = '[{"id":1,"title":"Gone with the Wind","publishDate":"1936-06-10T00:00:00.000Z","related":[80,3]},{"id":2,"title":"Freelancer","publishDate":"2015-08-11T00:00:00.000Z","related":[45,89]},{"id":3,"title":"A Christmas Carol","publishDate":"1843-12-19T00:00:00.000Z","related":[20,33]},{"id":4,"title":"The Cat in the Hat","publishDate":"1957-03-12T00:00:00.000Z","related":[50,10]}]';

var expected = [
    {id: 1, title: 'Gone with the Wind', publishDate: new Date('1936-06-10'), related: [80, 3]},
    {id: 2, title: 'Freelancer', publishDate: new Date('2015-08-11'), related: [45, 89]},
    {id: 3, title: 'A Christmas Carol', publishDate: new Date('1843-12-19'), related: [20, 33]},
    {id: 4, title: 'The Cat in the Hat', publishDate: new Date('1957-03-12'), related: [50, 10]},
  ];

var result = JSON.parse(input, reviver);

expect(result).toEqual(expected);
console.log("Test pass");

  // function declarations
  function reviver(key, value) {
    if (key === '') { // handle root level object, the last key is ""
      return value; // normal just need to return value, what you return here will be used as parsed value
    }
    
    // handle the case you want to take care
    if (key === 'publishDate') {
      return new Date(value)
    }
    return value
  }