Using JSON.stringify for Pretty Print in JavaScript

JSON.stringify with Pretty Print

JSON.stringify is a method in JavaScript that converts a JavaScript object into a JSON string. By default, the output of JSON.stringify is a compact string without extra spaces or line breaks. However, it has an optional third argument called space that allows "pretty-printing" the JSON output by adding indentation and line breaks, making the JSON string more readable.

Syntax of JSON.stringify with Pretty Print

JSON.stringify(value, replacer, space)

Explanation:

• value: The object or array to be converted into a JSON string.
• replacer (optional): A function or array used to modify or filter the values during stringification.
• space (optional): A number or string used to insert white space and indentation into the output.
• If space is a number, it specifies the number of spaces to use for indentation (up to 10).
• If space is a string, it uses the string for indentation.

Example 1: Pretty Printing a Simple Object

Code:

// Define a JavaScript object
const person = {
  name: "Sara",
  age: 25,
  department: "IT"
};

// Convert object to a JSON string with pretty print (2 spaces indentation)
const jsonString = JSON.stringify(person, null, 2);

// Output the pretty-printed JSON string
console.log(jsonString);

Output:

 
{
  "name": "Sara",
  "age": 25,
  "department": "IT"
}

Explanation:

1. The null value for the second argument (replacer) means no filtering is applied.

2. The 2 as the third argument specifies two spaces for indentation, making the JSON more readable.

Example 2: Pretty Printing a Nested Object

Code:

// Define a nested JavaScript object
const company = {
  name: "TechCorp",
  employees: [
    { name: "Sara", role: "Developer" },
    { name: "Emily", role: "Designer" }
  ],
  location: "New York"
};

// Convert nested object to a JSON string with pretty print (4 spaces indentation)
const jsonString = JSON.stringify(company, null, 4);

// Output the pretty-printed JSON string
console.log(jsonString);

Output:

 
{
    "name": "TechCorp",
    "employees": [
        {
            "name": "Sara",
            "role": "Developer"
        },
        {
            "name": "Emily",
            "role": "Designer"
        }
    ],
    "location": "New York"
}

Explanation:

1. The object company contains an array of employees.

2. By passing 4 as the third argument, the output is indented with four spaces, making the nested structure more readable.

Note:

1. space Argument Limit:

• If you pass a number greater than 10 as the space argument, JavaScript will limit it to 10 spaces.

2. Using a String for Indentation:

• You can also pass a string instead of a number for the space argument:

Code:

JSON.stringify(person, null, "--");
This will use "--" as the indentation string.

Benefits of Pretty Printing JSON

1. Improves Readability: Pretty-printed JSON is easier to read and understand, especially for complex or nested data structures.

2. Useful for Debugging: Developers can easily inspect the structure and values of objects.

3. Ideal for Configuration Files: Pretty-printed JSON is commonly used in configuration files to improve maintainability.

Practical Guides to JSON Snippets and Examples.