How to print JSON output beautifully in JavaScript?
Tags: javascript
Published: 2021-03-06 00:00:00

---
  title: How to print JSON output beautifully in JavaScript?
  published: true
  tags: JavaScript
  date: Sat Mar 06 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/print-json-output-beautifully-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-01140ccfb71fa1b5f49a09fd9eccd080.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/print-json-output-beautifully-javascript)
  
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

```js
/* 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,

```js
// 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: "valenzuelavega@optique.com",
    phone: "+1 (875) 555-3519",
    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,

```js
// 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":"valenzuelavega@optique.com","phone":"+1 (875) 555-3519","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,

```js
// 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: "valenzuelavega@optique.com",
    phone: "+1 (875) 555-3519",
    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": "valenzuelavega@optique.com",
        "phone": "+1 (875) 555-3519",
        "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](https://jsbin.com/sifolabodu/4/edit?js,console).

### Feel free to share if you found this useful 😃.

---