Pretty Printing JSON in JavaScript

To pretty-print JSON in JavaScript, you can use the JSON.stringify(obj, replacer, space) method. The third parameter of the JSON.stringify() method specifies the number of spaces to use when outputting the JSON string. If you pass a non-zero number, JSON.stringify() will generate pretty JSON with the specified number of white spaces in the JSON. If you pass 0, then JSON.stringify() will generate minified JSON. You can also pass a string instead of a number, which will be inserted instead of spaces. In this JavaScript Pretty Print JSON example, we use the JSON.stringify() method to print a JavaScript object in a human-readable format. Click Execute to run the JavaScript Pretty Print JSON example online and see the result.
Pretty Printing JSON in JavaScript Execute 
const obj = {Id: 1, Customer: "Leo", City: "Rome"};

console.log('Pretty Print JSON result:');
console.log(JSON.stringify(obj, null, 3));
Updated: Viewed: 15320 times

What is JSON?

JSON (JavaScript Object Notation) is a lightweight text format for holding structured data format. JSON is often used to share information over the network in client/server and server/server communications. JSON itself includes no methods or functions; it's just a data storage format. JSON itself has no methods and does not support comments. JSON format came from JavaScript, but it is now actively used in almost all programming languages, including PHP, Python, Java, C++, C#, Go, and most of them, like Python, has built-in modules for working with JSON data.

JSON Example
{
  "Id": 78912,
  "Customer": "Jason Sweet",
  "Quantity": 1,
  "Price": 18.00
}

Why pretty print JSON?

JavaScript objects are typically converted to JSON in a minified format, where all unnecessary characters, such as spaces and newlines, are removed. This reduces the space used when saving JSON to disk and saves bandwidth when transferring JSON over the network. However, such JSON strings are not readable by humans. To make JSON readable, you need to generate a pretty JSON string.

How to pretty print JavaScript object to JSON string?

JavaScript has a built-in JSON.stringify(obj, replacer, space) method to convert objects to JSON and pretty-print the generated JSON string. The third argument, "space," defines the spacing and makes the JSON human-readable:

Pretty Print JavaScript Object to JSON Example
const data = {Id: 78912,Customer: "Jason Sweet", Quantity: 1, Price: 18.00};

console.log(JSON.stringify(data, null, 2));

// output: 
// {
//   "Id": 78912,
//   "Customer": "Jason Sweet",
//   "Quantity": 1,
//   "Price": 18
// }

How to pretty print an existing JSON string?

To pretty print a minified JSON string, you need first to convert it to a JavaScript object and then convert it back to a pretty JSON string.

Pretty Print Minified JSON String Example
const str = '{"Id":78912,"Customer":"Jason Sweet", "Quantity":1,"Price":18.00}';

const obj = JSON.parse(str);

console.log(JSON.stringify(obj, null, 2));

// output: 
// {
//   "Id": 78912,
//   "Customer": "Jason Sweet",
//   "Quantity": 1,
//   "Price": 18
// }

See also

JavaScript Pretty Print JSON Related API examples and articles