Difference between JSON.stringify() and JSON.parse() in JSON

Now a days all browsers supports JSON and in JSON we have stringify() and parse(), are most important methods which helps us to formatting of JSON. Let’s try to understand Difference between JSON.stringify() and JSON.parse() in JSON.

1. stringify() is used to convert JSON object to JSON String. It serializes a JavaScript object into a JSON string.
2. parse() is used to convert JSON string/Array object to JSON Object. It deserializes a JSON string into a JavaScript object.

Let’s try to understand with examples:

Example-1 : Convert JSON Object into JSON String and then convert JSON string into JSON Object.

const myObj = {
  name: 'Ajay',
  age: 30,
  favoriteFood: 'Puff'
};

const myObjStr = JSON.stringify(myObj);

console.log(myObjStr);
//output: "{"name":"Ajay","age":30,"favoriteFood":"Puff"}"

console.log(JSON.parse(myObjStr));
//output as Object: {name:"Ajay",age:30,favoriteFood:"Puff"}"

Please Note JSON.parse() throws if the string passed to it has trailing commas.

 

Example-2 : Also convert array in to JavaScript Object

const myArr = ['Ajay', 'Dhruv', 'Mitesh'];

const myArrStr = JSON.stringify(myArr);

console.log(myArrStr);
//output: "["Ajay", "Dhruv", "Mitesh"]"

console.log(JSON.parse(myArrStr));
//output as Object: ['Ajay', 'Dhruv', 'Mitesh']

 

Example-3 : JSON.parse() with replacer

Here we have a object with name,age and favoriteFood, in which we would require string in upper case and number value to be added with 10.

const myObj = {
  name: 'Ajay',
  age: 30,
  favoriteFood: 'Puff'
};

const myObjStr = JSON.stringify(myObj);

console.log(
JSON.parse(myObjStr, (key, value) => {
  if (typeof(value) === 'string') {
    return value.toUpperCase();
  }
  else if (typeof(value) === 'number') {
    return value+10;
  } 
  return value;
}));
// Output as Object : {name: "AJAY", age: 40, favoriteFood: "PUFF"}

 

Example-4 : JSON.stringify() with replacer

 Here we have a object with name,age and favoriteFood, in which we would require string in upper case and verify whether age is less than 100 or not. If age is greater than 100, should return value else discard age.

const myObj = {
  name: 'Ajay',
  age: 30,
  favoriteFood: 'Puff'
};

const myObjStr = JSON.stringify(myObj,replacer);

function replacer(key, value) {
  if (typeof(value) === 'string') {
    return value.toUpperCase();
  }
  else if (typeof(value) === 'number' && key === "age" && value>100) {
    return undefined;
  } 
  return value;
}


console.log(myObjStr);
// Output: {"name":"AJAY","favoriteFood":"PUFF"} //if age is greater than 100
// Output: {"name":"AJAY","age":30,"favoriteFood":"PUFF"} //if age is less than 100

 

Example-5 : JSON.stringify() with replacer and spacer for formatting

Below example is same as Example-4 except we could add space or any other characters as shown in example. In this example we have added “—” to understand use of second argument along with spacer.

const myObj = {
  name: 'Ajay',
  age: 30,
  favoriteFood: 'Puff'
};

const myObjStr = JSON.stringify(myObj,replacer,"---");

function replacer(key, value) {
  if (typeof(value) === 'string') {
    return value.toUpperCase();
  }
  else if (typeof(value) === 'number' && key === "age" && value>100) {
    return undefined;
  } 
  return value;
}

console.log(myObjStr);
// Output: 
//{
//---"name": "AJAY",
//---"age": 30,
//---"favoriteFood": "PUFF"
//}