How to print JSON output beautifully in JavaScript?

Originally posted here!

To print the JSON output beautifully (aka pretty-print), you can use the JSON.stringify() method and pass a spacing value (or indentation) as the third argument to the function in JavaScript.

TL;DR

/* Pretty print JSON output ❤️ */

// Define a white-space value
// as the third argument in the function
JSON.stringify(obj, null, 4);

For example, let's say we have an object like this,

// a big object
const obj = [
  {
    _id: "6043aa64159c9e973618f5d0",
    index: 0,
    guid: "9fea376b-7e70-4d8a-ab85-9da9dbff6c34",
    isActive: true,
    balance: "$3,003.03",
    picture: "http://placehold.it/32x32",
    age: 27,
    eyeColor: "green",
    name: "Valenzuela Vega",
    gender: "male",
    company: "OPTIQUE",
    email: "[e-mail]",
    phone: "[phone]",
    address:
      "116 Glenmore Avenue, Coyote, Federated States Of Micronesia, 5664",
  },
];

If you directly print the output of the JSON.stringify() method to the console, It may look like this,

// Output JSON without any modification
const output = JSON.stringify(obj);

console.log(output);
// OUTPUT
/*

[{"_id":"6043aa64159c9e973618f5d0","index":0,"guid":"9fea376b-7e70-4d8a-ab85-9da9dbff6c34","isActive":true,"balance":"$3,003.03","picture":"http://placehold.it/32x32","age":27,"eyeColor":"green","name":"Valenzuela Vega","gender":"male","company":"OPTIQUE","email":"[e-mail]","phone":"[phone]","address":"116 Glenmore Avenue, Coyote, Federated States Of Micronesia, 5664"}]

*/

This output is really hard to understand and reason about 🤯.

So now let's make it much more readable by passing the obj as the first argument and a third argument of value 4 to define the white-space (or indentation) needed to make it readable to the JSON.stringify() method.

It can be done like this,

// a big object
const obj = [
  {
    _id: "6043aa64159c9e973618f5d0",
    index: 0,
    guid: "9fea376b-7e70-4d8a-ab85-9da9dbff6c34",
    isActive: true,
    balance: "$3,003.03",
    picture: "http://placehold.it/32x32",
    age: 27,
    eyeColor: "green",
    name: "Valenzuela Vega",
    gender: "male",
    company: "OPTIQUE",
    email: "[e-mail]",
    phone: "[phone]",
    address:
      "116 Glenmore Avenue, Coyote, Federated States Of Micronesia, 5664",
  },
];

// set the white-space of the JSON output to 4
const prettyJSON = JSON.stringify(obj, null, 4);

console.log(prettyJSON);

// OUTPUT

/*

[
    {
        "_id": "6043aa64159c9e973618f5d0",
        "index": 0,
        "guid": "9fea376b-7e70-4d8a-ab85-9da9dbff6c34",
        "isActive": true,
        "balance": "$3,003.03",
        "picture": "http://placehold.it/32x32",
        "age": 27,
        "eyeColor": "green",
        "name": "Valenzuela Vega",
        "gender": "male",
        "company": "OPTIQUE",
        "email": "[e-mail]",
        "phone": "[phone]",
        "address": "116 Glenmore Avenue, Coyote, Federated States Of Micronesia, 5664"
    }
]


*/

Now the output looks much more friendly to the eyes and we could understand each property clearly! 🥳

• The third argument is where we need to specify the white-space (indentation) that needs to be added to the JSON output string to make it more readable or to make it pretty 😄. The function accepts a number type or a string type as the third argument. If it's a number the number is used to define the white-space that needs to be applied to the output. If it's a string, then that string will be placed instead of the white-space.

• The second argument is a replacer function, that's why we are giving it as null to not make any changes to the output.

See the above code live in JSBin.

Feel free to share if you found this useful 😃.

---