Pretty Print JSON Strings in JavaScript

Pretty printing JSON means formatting JSON data with indentation and line breaks to make it easier to read. In JavaScript, this can be done using the JSON.stringify() method with its optional indentation parameter.

[Approach 1]: Using JSON.stringify() with Indentation

The JSON.stringify() method converts a JavaScript object into a JSON string. Its third parameter can be used to specify the indentation level.

• Pass the JavaScript object to JSON.stringify().
• Use null as the replacer when no filtering is required.
• Specify the number of spaces for indentation as the third argument.

Syntax:

JSON.stringify(value, replacer, space);

Example: This example formats a JavaScript object using two spaces for indentation.

const obj = {
    name: "Ryan",
    age: 30,
    city: "Mumbai"
};

const pretty = JSON.stringify(obj, null, 2);

console.log(pretty);

{
  "name": "Ryan",
  "age": 30,
  "city": "Mumbai"
}

[Approach 2]: Using a Different Indentation Level

The space parameter can be changed to control the indentation of the formatted JSON.

• Use the object as the first argument.
• Pass null as the replacer.
• Specify the required number of spaces as the third argument.

Example: This example formats JSON using four spaces for indentation.

const data = {
    name: "Alen",
    profession: "Developer",
    skills: [
        "JavaScript",
        "Python"
    ]
};

const formatted = JSON.stringify(data, null, 4);

console.log(formatted);

{
    "name": "Alen",
    "profession": "Developer",
    "skills": [
        "JavaScript",
        "Python"
    ]
}

[Approach 3]: Pretty Printing a JSON String

When JSON is already available as a compact string, it must first be converted into a JavaScript object using JSON.parse(). The object can then be formatted using JSON.stringify().

• Parse the JSON string using JSON.parse().
• Convert the resulting object back into a string.
• Use the indentation parameter to format the JSON.

Example: This example formats a JSON string containing nested data.

const raw = '{"name":"Lucas","details":{"age":25,"city":"Delhi"}}';
const obj = JSON.parse(raw);
console.log(JSON.stringify(obj, null, 2));

{
  "name": "Lucas",
  "details": {
    "age": 25,
    "city": "Delhi"
  }
}

[Approach 4]: Displaying Pretty JSON in a Web Page

Pretty-printed JSON can be displayed in an HTML page using the <pre> element. The <pre> tag preserves spaces and line breaks.

<!DOCTYPE html>
<html>

<head>
    <title>Pretty Print JSON</title>
</head>

<body>

    <pre id="output"></pre>

    <script>
        const jsonString =
            '{"name":"Adam","hobbies":["Cricket","Reading"]}';

        const data = JSON.parse(jsonString);

        const formatted =
            JSON.stringify(data, null, 2);

        document.getElementById("output")
            .textContent = formatted;
    </script>

</body>

</html>

Output:

{
  "name": "Adam",
  "hobbies": [
    "Cricket",
    "Reading"
  ]
}

[Approach 5]: Saving Pretty JSON to a File in Node.js

In Node.js, pretty-printed JSON can be saved to a file using the fs module.

• Import the fs module.
• Convert the object into a formatted JSON string.
• Write the formatted string to a JSON file.

const fs = require("fs");

const obj = {
    name: "Ben",
    age: 28,
    city: "Bangalore"
};

const formatted =
    JSON.stringify(obj, null, 2);

fs.writeFileSync("data.json", formatted);

console.log(
    "JSON saved in a pretty format."
);

Output:

JSON saved in a pretty format.