Introduction

The JSON object, available in all modern browsers, has two useful methods to deal with JSON-formatted content: parse and stringify. JSON.parse() takes a JSON string and transforms it into a JavaScript object. JSON.stringify() takes a JavaScript object and transforms it into a JSON string.

Here’s an example:

const myObj = {
  name: 'Skip',
  age: 2,
  favoriteFood: 'Steak'
};

const myObjStr = JSON.stringify(myObj);

console.log(myObjStr);
// "{"name":"Sammy","age":6,"favoriteFood":"Tofu"}"

console.log(JSON.parse(myObjStr));
// Object {name:"Sammy",age:6,favoriteFood:"Tofu"}

And although the methods are usually used on objects, they can also be used on arrays:

const myArr = ['bacon', 'lettuce', 'tomatoes'];

const myArrStr = JSON.stringify(myArr);

console.log(myArrStr);
// "["shark","fish","dolphin"]"

console.log(JSON.parse(myArrStr));
// ["shark","fish","dolphin"]

JSON.parse()

JSON.parse() can take a function as a second argument that can transform the object values before they are returned. Here the object’s values are transformed to uppercase in the returned object of the parse method:

const user = {
  name: 'Sammy',
  email: '[email protected]',
  plan: 'Pro'
};

const userStr = JSON.stringify(user);

JSON.parse(userStr, (key, value) => {
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  return value;
});

Note: Trailing commas are not valid in JSON, so JSON.parse() throws an error if the string passed to it has trailing commas.

JSON.stringify()

JSON.stringify() can take two additional arguments, the first one being a replacer function and the second a String or Number value to use as a space in the returned string.

The replacer function can be used to filter out values, as any value returned as undefined will be out of the returned string:

const user = {
  id: 229,
  name: 'Sammy',
  email: '[email protected]'
};

function replacer(key, value) {
  console.log(typeof value);
  if (key === 'email') {
    return undefined;
  }
  return value;
}

const userStr = JSON.stringify(user, replacer);
// "{"id":229,"name":"Sammy"}"

And an example with a space argument passed-in:

const user = {
  name: 'Sammy',
  email: '[email protected]',
  plan: 'Pro'
};

const userStr = JSON.stringify(user, null, '...');
// "{
// ..."name": "Sammy",
// ..."email": "[email protected]",
// ..."plan": "Pro"
// }"

Conclusion

In this tutorial, you used explored how to use the JSON.parse() and JSON.stringify() methods. If you’d like to learn more about working with JSON in Javascript, check out our How To Work with JSON in JavaScript tutorial.

For more information on coding in JavaScript, take a look at our How To Code in JavaScript series, or check out our JavaScript topic page for exercises and programming projects.