How to Use JSON stringify() and JSON parse() in JavaScript

John on July 15, 2020

JSON is a fantastic way to store data as it can be interpreted by most popular programming languages. JavaScript provides two powerful utilities for converting JSON content into JavaScript objects and back into JSON markup; stringify() and parse().

In this article, we will take a look at what these utilities do and when to use one or the other.

JSON Parse

The JSON.parse() utility converts JSON content into a JavaScript object. To use it we just have to pass the JSON content inside the () (brackets). A reviver function can also be passed in as an optional second argument to check each property before the value is returned.

JSON.parse(json[, reviver]);

Let's have a look at an example of parsing JSON and accessing a property on the JavaScript object.

const json = '{ "first_name": "John", "last_name": "Smith", "age": 28, "email": "[email protected]"}';

var obj = JSON.parse(json);

console.log(obj.first_name);

Once the data has been transformed into a JavaScript object, its properties can be accessed by adding a . (dot) to the end of the variable and then supplying the property name.

Let's try another parse, except this time we will use a reviver function to process the data before we get the object back.

var obj = JSON.parse(json, function (key, value) {
  if (key == 'first_name') {
    return value.toUpperCase();
  }
  
  return value;
});

{
 first_name: 'JOHN',
 last_name: 'Smith',
 age: 28,
 email: '[email protected]'
}

In the above example, we are looking for the key first_name, changing its value to uppercase and returning it.

JSON Stringify

The JSON.stringify() utility takes a JavaScript object and converts it back into JSON markup. Let's have a look at the syntax of this utility.

JSON.stringify(value[, replacer[, space]]);

• value - the JavaScript item that is to be covered into JSON
• replacer - an optional function that can be used to modify the properties and content of the JavaScript object before it is converted
• space - an optional string or number to be used as a space in the output

Here is a basic example of stringifying a JavaScript object without any extra options implemented.

const obj = {
 first_name: 'John',
 last_name: 'Smith',
 age: 28,
 email: '[email protected]'
};

const json = JSON.stringify(obj);

console.log(json);

{"first_name":"John","last_name":"Smith","age":28,"email":"[email protected]"}

Let's say for security reasons we wanted to redact information in the email property, and format the JSON output in a human-friendly way. We could implement JSON.stringify() like this:

const obj = {
 first_name: 'John',
 last_name: 'Smith',
 age: 28,
 email: '[email protected]'
};

function replacer(key, value) {

  if (key == 'email') {
    return 'REDACTED'
  }
  
  return value;
}

const json = JSON.stringify(obj, replacer, ' ');

console.log(json);

{
 "first_name": "John",
 "last_name": "Smith",
 "age": 28,
 "email": "REDACTED"
}

In the above example, the replacer function behaves a bit like a for loop. The key and value from stringify are passed in as arguments and if the key matches email we are returning REDACTED rather than the original value.

Also, you will see that in the third argument we are passing in a   (space). This makes the output human-friendly rather than in a minified style as is shown in the first stringify example.

Conclusion

You can now parse JSON content into JavaScript objects and convert them back to JSON. I did consider adding an example of how to load a JSON file, though it seems a little too off-topic as there are several different ways to load files depending on your JavaScript implementation. I will create a post about this in due course.