Home » Javascript » How to convert JavaScript object to JSON using JSON.stringify()

How to convert JavaScript object to JSON using JSON.stringify()

At some point as a developer you’ll probably need to send JSON data to a database from a web application using an API, or read JSON data that’s been retrieved from an API. In order to do so, you’ll need to know how to convert a JavaScript object to JSON using JSON.stringify(), and how to parse JSON data into a JavaScript object using JSON.parse(). In this post I’ll cover:

  1. What is JSON?
  2. How to create a custom JavaScript object and view in debug console
  3. Convert object to JSON using JSON.stringify()
  4. Parse JSON data into JavaScript object using JSON.parse()

What is JSON?

The official definition from https://en.wikipedia.org/wiki/JSON is:

JSON is an open standard file format and data interchange format that uses human-readable text to store and transmit data objects consisting of attribute–value pairs and arrays.

https://en.wikipedia.org/wiki/JSON

It is simply a way of organizing data in a text file, in a structured way, with rules, that enable any system using a JSON file to understand what to do with the text it contains. For instance in a JSON file we know that :

  • every object must be surrounded by curly brackets – {}.
  • Every collection / array must be surrounded by square brackets – [].
  • An object must have a list of properties where each property has a name and a value.
  • Each property in a list of properties must be separated by a comma.

And using these rules we can build a JSON file. We’ll start by defining the JSON object that we will then turn into JSON.

Custom JavaScript Object

Let’s start with defining a custom JavaScript object:

	const product = { 
			id: 1, 
      		name: "bucket", 
			color: "red", 
      		quantity: 21 };
    

If you want to see an object, and what it’s properties contain, you might use console.log to output it in the console in Chrome Developer Tools (learn more about how to debug using Chrome Developer tools in this post).

But writing console.log(product) would show you this:

View JavaScript object in console

The JavaScript object is shown initially ‘collapsed’, but clicking on the small black arrow will expand the object into a more readable state, so that you see the properties listed underneath one another. So how can you convert that object into JSON?

Convert JavaScript object to JSON using JSON.stringify

If you needed to use an API endpoint to create this product in a database, you’d need to convert it to JSON, and to do this you need to use JSON.stringify(). This method converts a JavaScript object to a JSON string.

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

And now you’ll see a formatted JSON string like this:

Convert JavaScript object to JSON using JSON.stringify
This string can be sent as the body if an API endpoint to provide the product data.

How to convert JSON to a JavaScript object using JSON.parse()

This is the reverse scenario, where you might be getting data from an API and you want to convert the JSON to a JavaScript object. To do this you use JSON.parse().

	//some json data
	let jsonData = '{"id":5,"name":"ball","color":"yellow","quantity":16}';

    let jsonObject = JSON.parse(jsonData);

If you use console log to write the the jsonData and then the jsonObject out, you will see this:

convert json string to javascript object using json.Parse

Summary

This post has provided examples of how to use JSON.stringify() to convert a JavaScript object to JSON, and JSON.parse() to convert JSON to a JavaScript object.