Difference between JSON.stringify() and JSON.parse() in JSON
📋 Table Of Content
In this article we will learn about the difference between JSON.stringify() and JSON.parse() methods in JSON.
JSON is the short form of JavaScript Object Notation. It is an open standard data format for storing and transporting data, like from a server to a webpage.
A JSON object have two methods to deal with the JSON-formatted data:
- JSON.stringify(), and
- JSON.parse()
Difference between JSON.stringify() and JSON.parse() in JSON.
The difference between the two methods are:
- The JSON.stringify() method is used to take a JavaScript object and convert it to a JSON string. and
- The JSON.parse() method is used to take a JSON string and convert it into a JavaScript object.
Let's understand both methods with examples.
JSON.stringify()
This method converts a JavaScript object or value into a JSON string.
Syntax:
JSON.stringify(value)
Example:
let person={name: "John", address: "New York"};
console.log(JSON.stringify(person))
Output:
The person object is converted to a JSON string.
{"name":"John","address":"New York"}
The JSON.stringy() method can take two optional arguments: a replacer and a space.
Syntax:
JSON.stringify(value, replacer, space)
- replacer can be a function or an array to alter the output of the Javascript object.
- space can be a number or a string that can be used as white space for readability purposes.
Example: replacer, as a function
As a function, replacer takes two arguments: key and value being stringified. It can be used to filter out values like this example.
function replacer(key,value){
if (typeof value === 'string') {
return undefined;
}
return value;
}
let person={name: "John", age: 22, address: "New York", personID: 12345 ,};
console.log(JSON.stringify(person, replacer))
Output:
{"age":22,"personID":12345}
In the above code, the replacer has filtered all the properties whose value is a string from the JSON string.
Example: replacer as an array
As an array, we have to specify those properties that we want to include in the resulting JSON string.
let person={name: "John", age: 22, address: "New York", personID: 12345 ,};
console.log(JSON.stringify(person, ['name', 'address']))
Output:
{"name":"John","address":"New York"}
JSON.parse()
This method converts JSON string to a JavaScript object.
Syntax:
JSON.parse(string)
Example:
let personString = '{"name":"John","age":22,"address":"New York","personID":12345}'
console.log(JSON.parse(personString))
Output:
{ name: 'John', age: 22, address: 'New York', personID: 12345 }
JSON.parse() method can take a second optional argument that can be use to alter the value of the returning JavaScript object.
Syntax:
JSON.parse(string, reviver)
- string: The string to parse as JSON Object.
- reviever : As a function, it prescribes how a value that is originally parsed is transformed before being returned.
Example:
let personString = '{"name":"John","score":22}'
var personObject = JSON.parse(personString, (key, value) => {
if(typeof value === 'number'){
return value * 2;
}
return value
}
);
console.log(personObject)
Output:
{ name: 'John', score: 44 }
In the above example, we have used a function as a second argument to check if a value is a number or not.
If the value is a number then we have multiplied the value by 2 and returned the values a JavaScript object.
Related Topics:
