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

json javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

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.

How to use JSON.stringify() and JSON.parse() in JavaScript

JSON.stringify() and JSON.parse() are useful tools for handling JSON-formatted content

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview