JSON.parse() and JSON.stringify() | Explained with examples

One of the biggest features of JavaScript is its JSON notation for transferring data, JSON object is perceived by all updated browsers and is used in almost every programming language that is available in the current market. JSON is a very light-weighted and human-friendly data notation that is also readable by programming languages.

JSON objects are transferred or read by the program in the form of strings which are called JSON strings. To identify JSON string, simply look for quotation marks on either end of the trivial JSON notation. However, JSON strings need to be converted into JSON objects so that we don’t have to use string operations in our program.

Similarly, to transfer data from one program to another – or let’s just say from the server to the client-side – it is best to convert the JSON object back to a JSON string. For these conversions, ES6 JavaScript provided two functions “JSON.parse() & JSON.stringify()”.

JSON.stringify() and its usage

JavaScript Objects are converted into strings with the “JSON.stringify()”. To demonstrate this function, we are going to need an object which can be created with the following lines of code:

var myObject = {
name: "John Doe",
age: 15,
email: "[email protected]",
job: "Auditor",
};

You can print out this object on the console by using the following line:

console.log(myObject);

You will get the following output on your console.

Now, we can pass this object in the JSON.stringify() function and store it inside another variable using the following line:

var converted = JSON.stringify(myObject);

This variable can be printed by using the console.log() function:

console.log(converted);

After executing the following program, you should see the following output on your console:

As you can see, we were able to convert the JSON object into a string that can be transferred over a network or stored in some file for later use.

The Stringify() function takes 2 additional arguments which are optional but still very useful:

one is the function known as the replacer argument
second one is called the space argument

The replacer parameter

The replacer is a function that you create with two parameters:

key
value, corresponding to the key-value pair of the object.

The replacer method is used to either check for a specific value or return another string instead of the original value. The replacer method can also be used to skip a key-value pair from the converted string by returning an undefined value.

To create a simple replacer method that will skip the key-value pair from the resulting string if the value of is “Auditor”, for that use the following lines of code:

function replacer(key, value) {
if (value === "Auditor") {
return undefined;
}
return value;
}

To create a new resulting string with from our JavaScript object and print it use the following line:

console.log(JSON.stringify(myObject, replacer));

You get the following result on the console:

As you can see, since the “job” key had the value of “Auditor” therefor it was skipped from the resulting string

The space parameter

The third argument of the JSON.stringify() function is the space parameter, this parameter takes either a string or a number for the following actions:

If a string is passed, then that string gets appended before the key-value pairs
If a number is passed, then that number of spaces are added between the key value pairs

To demonstrate the spacer argument, we use the following line of code:

console.log(JSON.stringify(myObject, null, 10));

You will observe the following result on the console:

You can observe the space between each key-value pair (space is marked by the yellow line to make it more prominent)

To demonstrate the appending of a string before each key-value pair in the resulting string, use the following lines of code:

console.log(JSON.stringify(myObject, null, " A "));

You will observe the following result on the console:

The prefixed substring is easily noticeable

JSON.parse() and its usage

The JSON.parse() function is used to convert a string or more precisely JSON string into a JSON object. To demonstrate this, create a new json string with the following line of code:

const string = '{"name":"John Doe", "Age":15, "email":"[email protected]", "job": "Auditor"}';

To create a json object, pass this string in the parse() function and store the resultant object in a new variable using the following line of code:

const myObject = JSON.parse(string);

To observe this resulting object, use the console log function like so:

console.log(myObject);

Upon execution, you should observe the following output on your console:

You can access the values from this resulting object like any other normal object, try the following line of code to verify this:

console.log(myObject.job + " " + myObject.name);

You will get the following output on your console:

That is it for JSON.parse() function and JSON.stringify() function

Conclusion

The JSON.parse() function is used to convert a string into a JavaScript object while the JSON.stringify() function is used to convert a JavaScript object into a string. The JSON string is used whenever we want to transfer data from one program to another, within the program, it is better to use the JavaScript object rather than using the string operations. JavaScript provides these two functions as built-in functions, and these functions are supported by all modern-day browsers.