Pretty JSON Output

Pretty JSON Output

Tired of the one-liner JSON output, well no more! Utilize JSON.stringify built-in pretty printing. Set the 3rd parameter with your desired spacing level 👍 Bam, instant GLAM✨

Tired of the one-liner JSON output, well no more! Utilize JSON.stringify built-in pretty printing. Set the 3rd parameter with your desired spacing level 👍 Bam, instant GLAM✨

const protein = {steak: '🥩', bacon: '🥓'};

JSON.stringify(protein);
// {"steak":"🥩","bacon":"🥓"}

JSON.stringify(protein, null, 2);
/*
{
  "steak": "🥩",
  "bacon": "🥓"
}
*/

Tab Spacing 😉

But the Tab folks are like how about us?? Don’t worry, you can also pass "\t" for tab level spacing 😄

const protein = {steak: '🥩', bacon: '🥓'};

JSON.stringify(protein, null, "\t");

/*
{
 "steak": "🥩",
 "bacon": "🥓"
}
*/

Understanding the “Space” argument

The 3rd parameter of the JSON.stringify is used to control the spacing. It’s what gives you that pretty string output.

It allows 2 types of arguments: Number and String.

a. Number

You can use any number from 0 to 10 as your indentation.

const protein = {steak: '🥩', bacon: '🥓'};

JSON.stringify(protein, null, 1);
/*
{
 "steak": "🥩",
 "bacon": "🥓"
}
*/

b. String

Alternatively, you can use a string as your indentation. It allows a maximum of 10 characters. If you try to pass more than 10, it will just use the first 10 characters. So don’t try to beat the system 😝

const protein = {steak: '🥩', bacon: '🥓'};

JSON.stringify(protein, null, "I 💛");
/*
{
I 💛"steak": "🥩",
I 💛"bacon": "🥓"
}
*/

What is the 2nd parameter 🤔

The 2nd parameter is also called the replacer parameter. You can use it to transform the result.

It allows 2 types of arguments: Array and Function.

a. Array

I want to show you something really interesting when you pass in an array. You can use it to cherry pick the key-value pair that you want to output.

const protein = {
  steak: '🥩', 
  bacon: '🥓',
  pop: '🥤',
  tea: '🍵',
  shrimp: '🍤',
};

JSON.stringify(protein, ['steak', 'pop'], 2);
/*
{
  "steak": "🥩",
  "pop": "🥤"
}
*/

b. Function

The replacer is called for each item. So you can also pass in a function. This means you can loop over each item and with each pass, manipulate with the logic defined in your function.

Here’s an example, where I skip over the properties where the value is not a string. In other words, I only want to show the items where the value is a number.

const protein = {
  steak: '🥩', 
  calorie: 271,
  bacon: '🥓',
  sodium: 58,
};

const replacer = function(key, value) {
  if(typeof value !== "string") {
    return value
  }
  return undefined;
}

JSON.stringify(protein, replacer, 2);
/*
{
  "calorie": 271,
  "sodium": 58
}
*/

Resources

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

JSON Tutorial For Beginners | What is JSON | Learning JSON with JavaScript

JSON Tutorial For Beginners | What is JSON | Learning JSON with JavaScript

Javascript | How To Covert Javascript Array To JSON

In this example, we will see How To Covert Javascript Array To JSON. We can convert Javascript array to json using JSON.stringify() method. At some point in your time, whatever developer you are, you need to deal with JSON data. JSON stands for Javascript Object Notation. Exchange data between client and server is straightforward using JSON.

JavaScript | Convert JSON String to JSON Object

Convert JSON string to JSON object javascript. This tutorial is the purpose to explain the best ways and examples for convert JSON string to a JSON object.