From 39163bb8100054b61bc5352257b4bd4c1ace4163 Mon Sep 17 00:00:00 2001
From: Chalarangelo <chalarangelo@gmail.com>
Date: Thu, 21 Jul 2022 11:30:26 +0300
Subject: [PATCH] Add JSON pretty-print tip

---
 blog_posts/javascript-pretty-print-json.md | 59 ++++++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 blog_posts/javascript-pretty-print-json.md

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"
+// }
+```