JSON.parse() and JSON.stringify() with JavaScript

JSON (JavaScript Object Notation) is a lightweight interchange format for storing and transporting structured data based primarily on a set of key/value pairs.

There are two functions I use almost every day when writing JavaScript code. The JavaScript JSON.parse() method which takes a JSON string and converts it into a JavaScript object. And the JavaScript JSON.stringify() method which in turn converts that JSON object back into a JSON string.

So what does that mean in the real world exactly? Let's break it down with an example:

var my_obj = {
	name: "Josh",
	age: 30,
	about: "I love coding!"
};

var my_str = JSON.stringify(my_obj);

This snippet creates our object my_obj and stores three key/value pairs with the variable names name, age, and about. Another variable, my_str is then created to store the converted object into JSON string format:

console.log(my_str);
// "{"name":"Josh","age":30,"about":"I love coding!"}"

`JSON.parse()`

In a real-world example, a REST API or some other type of server call would return a response in JSON format, which allows us to easily manipulate and read the data. In this case, we would use the JavaScript JSON.parse() method to access that data. Using an example similar to the one above, we get:

var my_obj = JSON.parse(response);

console.log(my_obj);

The console.log() output would show this:

{
	"name": "Josh",
	"age": 30,
	"about": "I love coding!"
}

You could then access each key/value pair like this:

console.log(my_obj.name);
console.log(my_obj.age);

// Josh
// 30

`JSON.stringify()`

To convert the object back into JSON string format, you can use the JavaScript JSON.stringify() method like this:

var my_str = JSON.stringify(my_obj);

console.log(my_str);
// "{"name":"Josh","age":30,"about":"I love coding!"}"

This is very useful if you need to pass a raw JSON string in the request body to a remote server versus form data.

Other Useful Tidbits

Although these JSON methods are primarily used on objects and key/value pairs, they can also handle arrays:

var my_arr = ["bacon", "eggs", "toast"];
var my_str = JSON.stringify(my_arr);

console.log(my_str);
// "["bacon", "eggs", "toast"]"

console.log(JSON.parse(my_str));
// ["bacon", "eggs", "toast"]

JSON.stringify also comes with a third space attribute. This is notably useful for making console.log() outputs more legible. Here's a quick example of how that could work:

var my_obj = {
	name: "Josh",
	age: 30,
	about: "I love coding!"
};

var my_str = JSON.stringify(my_obj, null, "...");

console.log(my_str);

Note the "..." as the space attribute value of the JSON.stringify() method. This tells the browser to log the output with "..." before each key/value pair.

{
..."name": "Josh",
..."age": 30,
..."about": "I love coding!"
}

The space parameter can also contain a numeric value, which is the number of spaces prepended to each key/value pair. Passing a value of 4 for this parameter would prepend four spaces to each key/value pair.