JSON

JSON, short for JavaScript Object Notation, is a format created for exchanging data between parties. It uses a syntax that is easy for both humans and machines to read and write, and despite the fact that it has JavaScript as a part of its name, it can actually be used to exchange data between most modern programming languages.

Once you see data in the JSON format, you will quickly realize how much it looks like JavaScript code. It basically describes one or several objects, using a format that looks like normal JavaScript objects a lot. Consider this example:

let user = 
{
	name:
	{
		firstName: "John",
		lastName: "Doe"
	},
	age: 42
};

This is a regular JavaScript object, describing a user with a first and last name, as well as an age. When written as JSON, it would look like this:

{
	"name":
	{
		"firstName": "John",
		"lastName": "Doe"
	},
	"age": 42
}

This piece of JSON is quite easy for the human eye to read and understand, and it can be parsed with almost any modern programming language and turned into an actual object, including, of course, JavaScript.

JSON methods

JavaScript comes with a built-in object for dealing with JSON called... JSON. Like the built-in Math object, it only has static members, so you simply call the available methods directly on the JSON object. Let's have a look at these methods.

JSON.parse()

Whenever you receive data in the JSON format, the parse() method can be used to read the data and turn it into actual JavaScript objects and arrays. For instance, we can take the example from above, parse the JSON and receive a user object from it. Here's an example:

let jsonString = `
{
	"name":
	{
		"firstName": "John",
		"lastName": "Doe"
	},
	"age": 42
}`;

let user = JSON.parse(jsonString);
alert(user.name.firstName + " " + user.name.lastName + " is " + user.age + " years old");

Notice how I can take this string of JSON data, which could just as well have come from an external source, and turn it into a regular JavaScript object, simply by calling the parse() method.

JSON.stringify()

While the parse() method allows you to turn a string into an object, the stringify() method will do the exact opposite: It will take a JavaScript object or array and turn it into a string in the JSON format. You can use this if you want to send your objects/arrays to another destination, or if you need to expose it in a common format. Here's how it can be used:

let user = 
{
	name: "John Doe",
	age: 42
};

// Output: {"name":"John Doe","age":42}
let jsonString = JSON.stringify(user);
alert(jsonString);

With this example, the jsonString variable could now be used to pass the user object to another destination - it's as simple as that! And as mentioned, this method, and JSON in general, works well with arrays too. Let's try expanding the above example a bit to illustrate that:

let users = [];

let user = 
{
	name: "John Doe",
	age: 42
};
users.push(user);

user = 
{
	name: "Jane Doe",
	age: 39
};
users.push(user);

// Output: [{"name":"John Doe","age":42},{"name":"Jane Doe","age":39}]
let jsonString = JSON.stringify(users);
alert(jsonString);

Notice how I create an array and add two different user objects to it, before turning the array into JSON. As you can see, this works just as well - our JSON string is now an array, as noted by the surrounding square brackets, containing the two user objects.

Summary

JSON is a very widely used format for exchanging data between parties, and despite the fact that its syntax is almost identical to how JavaScript declares arrays and objects, JSON is widely supported by almost all modern programming languages. As you can see from the examples of this article, working with JSON in JavaScript is quite easy, thanks to the built-in JSON object.