How To Use JSON.parse() and JSON.stringify() in JavaScript

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: 'User',
age: 6,
favoriteFood: 'Steak'
};

const myObjStr = JSON.stringify(myObj);

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

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

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);
// "["bacon","lettuce","tomatoes"]"

console.log(JSON.parse(myArrStr));
// ["bacon","lettuce","tomatoes"]

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: 'User',
email: 'User@domain.com',
plan: 'Premium'
};
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: 'User',
email: 'User@domain.com'
};

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

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

And an example with a space argument passed-in:

const user = {
name: 'User',
email: 'User@domain.com',
plan: 'Pro'
};

const userStr = JSON.stringify(user, null, '...');
// "{
// ..."name": "User",
// ..."email": "User@domain.com",
// ..."plan": "Pro"
// }"

Tips and tricks

In this tutorial, you have successfully learned how to use JSON.strigify() and JSON.pare() in JavaScript. If you want to learn more about JSON checkout these documentations:
https://www.json.org/

If you want a server with any operating system, get started now with VPSie and get one month for free.

This tutorial is to help you based on this original tutorial https://www.digitalocean.com/community/tutorials/js-json-parse-stringify please use our tutorial for notes and tips.

Related Articles