Chalarangelo/30-seconds-of-code

---
title: Pretty-print a JSON object with JavaScript
shortTitle: Pretty-print JSON
type: tip
language: javascript
tags: [object,json]
cover: memories-of-pineapple-3
excerpt: Pretty-printing JSON objects in pretty easy and customizable in JavaScript. Here's the gist of it.
listed: true
dateModified: 2022-07-30
---

Pretty-printing refers to the process of making some data more human-readable. In regards to JSON, it's primarily the process of indenting the data so that it is easier to read. This is pretty easy to accomplish, using `JSON.stringify()` with the appropriate arguments.

```js
const obj = {
  id: 1182,
  username: 'johnsmith',
  active: true,
  emails: ['johnsmith@mysite.com', 'contact@johnsmi.th'],
};

JSON.stringify(obj, null, 2);
// {
//   "id": 1182,
//   "username": "johnsmith",
//   "active": true,
//   "emails": [
//     "johnsmith@mysite.com"
//     "contact@johnsmi.th"
//   ]
// }
```

As you can see in this example, the third argument of `JSON.stringify()` is the number of spaces to indent each level of the object. Additionally, you can use the second argument to specify a replacer function. This can come in handy if you want to provide custom formatting for certain types of values or specific key-value pairs.

```js
const obj = {
  id: 1182,
  username: 'johnsmith',
  active: true,
  emails: ['johnsmith@mysite.com', 'contact@johnsmi.th'],
};

const replacer = (key, value) => {
  if (key === 'id') return value.toString(16);
  if (key === 'username') return `@${value}`;
  if (key === 'emails') return `${value[0]} +${value.length - 1} more`;
  return value;
};

JSON.stringify(obj, replacer, 2);
// {
//   "id": "0x4e2",
//   "username": "@johnsmith",
//   "active": true,
//   "emails": "johnsmith@mysite.com +1 more"
// }
```