ZetCode

JavaScript JSON pretty print

last modified February 11, 2021

JavaScript JSON pretty print tutorial shows how to pretty print JSON data in JavaScript. Pretty printing is a form of stylistic formatting including indentation and colouring.

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write and for machines to parse and generate. The official Internet media type for JSON is application/json. The JSON filename extension is .json.

JSON.stringify

The JSON.stringify function converts a JavaScript object or value to a JSON string. We can use the function to pretty print JSON output. Note that on terminal, the console.log and console.dir functions automatically pretty print JSON data. The output is also coloured on terminals that support coloured output.

Web browsers do not automatically pretty print JSON output; we can prettify the JSON output with JSON.stringify.

JS JSON pretty print with JSON.stringify

The JSON.stringify function has a space option, which inserts white space into the output JSON string for readability purposes. The maximum value for space is 10; a value smaller than 1 provides no space.

stringify.js
let data = {
    'username': 'John Doe',
    'email': 'john.doe@example.com',
    'state': 'married',
    'profiles': [
        {'name': 'jd7', 'job': 'actor' },
        {'name': 'johnd7', 'job': 'spy'}
    ],
    'active': true,
    'employed': true
};

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

In the example, we add 2 space characters to the JSON output. We don't use the replacer, so we pass null as the second argument.

$ node stringify.js 
{
  "username": "John Doe",
  "email": "john.doe@example.com",
  "state": "married",
  "profiles": [
    {
      "name": "jd7",
      "job": "actor"
    },
    {
      "name": "johnd7",
      "job": "spy"
    }
  ],
  "active": true,
  "employed": true
}

In the following example, we fetch a user from a fake service. We use the axios library for fetching the user. Use npm i axios to install it.

get_user.js
const axios = require('axios');

async function makeGetRequest() {

  let res = await axios.get('https://jsonplaceholder.typicode.com/users/2');

  let data = res.data;
  console.log(JSON.stringify(data, null, 4));
}

makeGetRequest();

We fetch a single user from the using the fake API https://jsonplaceholder.typicode.com/users/2 URL. We use four spaces for indentation.

$ node get_user.js 
{
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
    "email": "Shanna@melissa.tv",
    "address": {
        "street": "Victor Plains",
        "suite": "Suite 879",
        "city": "Wisokyburgh",
        "zipcode": "90566-7771",
        "geo": {
            "lat": "-43.9509",
            "lng": "-34.4618"
        }
    },
    "phone": "010-692-6593 x09125",
    "website": "anastasia.net",
    "company": {
        "name": "Deckow-Crist",
        "catchPhrase": "Proactive didactic contingency",
        "bs": "synergize scalable supply-chains"
    }
}

In the next example, we retrieve data with the fetch function inside a browser. We prettify the output with JSON.stringify.

test.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        fetch('https://jsonplaceholder.typicode.com/todos/1')
            .then(response => response.json())
            .then(json =>
                document.body.appendChild(document.createElement('pre')).innerHTML = JSON.stringify(json, null, 4));
    </script>
</body>

</html>

We fetch one todo object from the testing website.

In this tutorial, we have were prettifying JSON output in JavaScript.

List JavaScript tutorials.