diff --git a/blog_posts/javascript-pretty-print-json.md b/blog_posts/javascript-pretty-print-json.md new file mode 100644 index 000000000..035fe3625 --- /dev/null +++ b/blog_posts/javascript-pretty-print-json.md @@ -0,0 +1,59 @@ +--- +title: "Tip: Pretty-print a JSON object with JavaScript" +shortTitle: Pretty-print JSON +type: tip +tags: javascript,object,json +expertise: intermediate +author: chalarangelo +cover: blog_images/memories-of-pineapple-3.jpg +excerpt: Pretty-printing JSON objects in pretty easy and customizable in JavaScript. Here's the gist of it. +firstSeen: 2022-07-30T05:00:00-04:00 +--- + +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" +// } +```