Day 14: Strings and JSON

Lesson 6: JSON.stringify & JSON.parse

JSON.stringify()

The first is JSON.stringify(), this takes a JavaScript objects and creates a stringified version of it that adheres to the JSON standard.

<h1>Hello World<h1>

const car = {
  make: "Nissan",
  model: "GTR",
  transmission: "manual",
  familyFriendly: false,
  gears: 6,
};

const data = JSON.stringify(car);
console.log(data);

You'll notice that looks pretty awful BUT it has all the keys/properties in double quotes.

If you want to make it look nicer, there are some optional arguments you can pass in to it. The full declaration is:

1JSON.stringify(value, replacer, space);

Don't worry about replacer we can just set that to null. The space argument however is pretty useful, it sets the number of spaces to indent sub properties. This is purely to make things more humanly readable, however if you do intend to read the contents of the file you write this to, then it is super useful.

It won't work in the playground though sadly ☹️

JSON.parse()

If you read JSON data from somewhere (99% of the time this will be from a file or in the response of URL API request) then you can do so with JSON.parse().

<h1>Hello World<h1>

const jsonData = '[{"make":"Nissan","model":"GTR","transmission":"manual","familyFriendly":false,"gears":6},{"make":"Nissan","model":"Rogue","transmission":"automatic","familyFriendly":true,"gears":5}]';
const cars = JSON.parse(jsonData);
console.log(cars);

And there you have it, how to convert JavaScript data into a string and back again using the JSON API.

1const car = {
2  make: "Nissan",
3  model: "GTR",
4  transmission: "manual",
5  familyFriendly: false,
6  gears: 6,
7};
8
9const newCar = car;

1const newCar = JSON.parse(JSON.stringify(car));