JSON.stringify() Method

JSON is a standard for transferring data across servers and clients, and it is the most famous format which is accepted by almost every modern programming language. Whenever the data needs to be transferred over the internet, it is transferred as a string value. When this string value is received by the application it is parsed into an object. Similarly, the objects are converted into JSON strings before sending them over the internet.

In JavaScript, the method used to convert the JavaScript objects into the JSON string is the stringify() method, and today we are going to cover its usage and syntax along with examples.

The Stringify() method

This method was introduced in the ES6 release of JavaScript, this method is used to convert JavaScript objects and JSON objects into JSON strings. To demonstrate this, take the following object:

var superHero = {
name:"Bruce Wayne",
"Super Power": "Super Rich",
"Cars Owned": [
{
name:"Murciélago",
Model:"LP 640",
Status:"Crashed",
},
{
name:"Aventador",
Model:" LP 700-4",
Status:"Seems Driveable after the accident",
},
],
};

If we print out this object onto the console using the following line:

console.log(superHero);

The result on the console is:

From the output, it is clear that it is indeed taken as an object by our javascript application. Printing this object onto the console was important so that we can see the difference between a string output and an object output (because sometimes they confuse especially when working with code editors)

To convert this into a JSON string we use the following line of code:

var superHeroString = JSON.stringify(superHero);

To verify this conversion, use the following line to print the variable superHeroString onto the console:

console.log(superHeroString);

We get the following result on the console:

You can observe that this time around, we have printed a string onto the console

The Stringify() Method | Syntax

The stringify() method takes in a javascript object, converts it into a string and then returns that string as its return value. The syntax is defined as

stringify(value: any, replacer?: (this: any, key: string, value: any) => any, space?: string | number): string;

The above syntax looks quite daunting if we simply it then the syntax becomes:

stringify(object, replacer, space);

From this syntax, you can see it takes 3 arguments:

The object to be converted into the JSON string
A replacer method (which is optional)
A space parameter which is also optional

Stringify() | The replacer and space parameter

To explain the replacer and space parameter, we first need an object that we will convert to a JSON string, you can create an object using the following lines:

var person = {
car: "Tesla",
instrument: "Guitar",
age: 25,
city: "New York"
}

We can pass this object into the stringy method and display the result using the following line:

console.log(JSON.stringify(person));

This will give us the following result:

But what if we don’t want to include the “key-value” pair which has the key “age”. For that, we can write a replacer method and pass it inside the second argument of the stringify method.

The replacer argument

This argument takes a replacer method(), the replacer() method takes 2 parameters, one is the key and the other is the value. To ignore a key-value pair, we can return an undefined value. Type the following lines of code:

functionreplacer(key, value) {
if (key === "age") {
returnundefined;
}
return value;
}

Now, if we use this replacer method as an argument to the stringify method with the following lines of code:

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

We get the following output on our console:

As you can see, the key-value pair with the key = “age” was excluded from the resulting string.

The space argument

The space or the spacer argument puts a certain amount of space between each key-value pair. For example, if we want a space of 10 characters between each key-value pair, we can use the following line of code:

console.log(JSON.stringify(person, null,10))

You will get the following result on your console:

I have marked the space with a red line to make it prominent

You can use a string for the space argument as well. This string will be added as a substring before each key-value pair. To demonstrate this, take the following line of code:

console.log(JSON.stringify(person, null, "S"));

You will get the following outcome on your console:

As you can see, the argument “S” was added as a substring before each key-value pair.

Conclusion

The JSON.stringify() method is used to convert JavaScript objects into JSON strings so that they can be transferred over the internet or in between various applications on your local machine. This method was added in JavaScript with the release of the ECMAv6 version of JavaScript running on the V8 JavaScript engine. In this post, we learned about the details of the stringify() method and its usage along with its examples.

JSON.stringify() Method | Explained