JSON stands for JavaScript Object Notation. JSON is a human-readable data format commonly used to exchange data between web browser, clients and server. Most of the modern APIs using JSON formats as output. That’s why the JSON is becoming popular data format for the API’s output.
JavaScript provides two methods to work with JSON content. parse and stringify. The methods are JSON.parse() and JSON.stringify().
- JSON.parse() method takes JSON string and transforms it into a JavaScript object.
- JSON.stringify() method takes a JavaScript object and transforms it into a JSON string.
1. Using JSON.parse()
The JSON.parse() function takes input a JSON data and transforms it into a JavaScript object. Here is a simple example of converting a JSON string into a JS object.
1 2 3 4 5 6 7 8 9 10 | // Store JSON data in a JavaScript variable var json = '{"id": 1, "name": "Dan Radak", "country": "United States"}'; // Convert JSON string to JavaScript object var obj = JSON.parse(json); // Access individual values from the JavaScript object console.log(obj.id); // Outputs: 1 console.log(obj.name); // Outputs: Dan Radak console.log(obj.country); // Outputs: United States |
Passing a function – You can also pass a function as second (optional) argument to JSON.parse() function to perform some task on each JSON values. Here is an example to which a function transform all string values to uppercase in the returned object of the parse method:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | // Store JSON data in a JavaScript variable var json = '{"id": 1, "name": "Dan Radak", "country": "United States"}'; // Convert JSON string to JavaScript object var obj = JSON.parse(json, (key, value) => { if (typeof value === 'string') { return value.toUpperCase(); } return value; }); // Access individual values from the JavaScript object console.log(obj.id); // Outputs: 1 console.log(obj.name); // Outputs: DAN RADAK console.log(obj.country); // Outputs: UNITED STATES |
We assume, this helps you to understand the uses of JSON.parse() method. Next, learn another method JSON.stringify() to perform the reverse of above.
2. Using JSON.stringify()
JSON.stringify() method is used to transform a JavaScript object to JSON string. You can simply pass a JavaScript object to this function and get a JSON array.
Here is a simple example of JSON.stringify() method:
1 2 3 4 5 6 7 8 | // Create a JavaScript object var obj = {id: 1, name: "Dan Radak", country: "United States"} // Converting JS object to JSON string var json = JSON.stringify(obj); console.log(json); //Expected output: {"id":1,"name":"Dan Radak","country":"United States"} |
You can also pass two additional arguments, One is the replacer function and the second can be the space value to format the output.
Using replacer function – A replacer function is used to filter the output values. For example, You can create a function and pass it as argument. This function will return any string value as undefined.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | //JavaScript object var obj = {id: 1, name: "Dan Radak", age: 28, country: "United States"} function replacer(key, value) { // Filtering out properties if (typeof value === 'string') { return undefined; } return value; } // Using a replacer function console.log(JSON.stringify(obj, replacer)); //Expected output: {"id":1, "age": 28} |
Using array as replacer – You can also pass an array containing some key names as replacer. Here the stringify() function will only return the matching key-pare values which keys are sent as replacer.
For example, we send id and name in an array as replacer function. In this case only those values are return as JS object and discarded any other values.
1 2 3 4 5 6 | // Create a JavaScript object var obj = {id: 1, name: "Dan Radak", age: 28, country: "United States"} // Converting JS object to JSON string with array replacer console.log(JSON.stringify(obj, ["id", "name"])); //Expected output: {"id":1, "name": "Dan Radak"} |
Passing space argument – You can also pass the space value as a third optional argument. This helps to make output in more readable format.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | // Create a JavaScript object var obj = {id: 1, name: "Dan Radak", age: 28, country: "United States"} // Empty replacer function function replacer(key, value) { return value; } // Using optional space argument console.log(JSON.stringify(obj, replacer, ' '); //Expected output //{ // "id": 1, // "name": "Dan Radak", // "age": 28, // "country": "United States" //} // Using a tab as space argument console.log(JSON.stringify(obj, replacer, '\t'); //Expected output //{ // "id": 1, // "name": "Dan Radak", // "age": 28, // "country": "United States" //} |
Conclusion
In this tutorial, you have learened the uses of the JSON.parse() and JSON.stringify() methods.
