loading...

Pretty JSON Output

samanthaming profile image Samantha Ming ใƒป2 min read

Code Tidbit by SamanthaMing.com

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


Thanks for reading โค
Say Hello! Instagram | Twitter | Facebook | Medium | Blog

Discussion

pic
Editor guide
Collapse
qm3ster profile image
Mihail Malo

Doesn't seem like the output of JSON.stringify(protein, null, "I ๐Ÿ’›") is recoverable with JSON.parse.

Collapse
samanthaming profile image
Samantha Ming Author

oh ya ๐Ÿ˜ฎ ...looking into the docs. it seems like:
Throws a SyntaxError exception if the string to parse is not valid JSON.

Definitely something to keep in mind before using the "space" parameter. thanks for catching that!

Collapse
qm3ster profile image
Mihail Malo

I was just curious if there would be a way to recover, for example another parameter you could pass to parse. There isn't though.

const protein = {
  steak: "๐Ÿฅฉ",
  bacon: "๐Ÿฅ“",
  fake: { shrimp: "๐Ÿค" },
  array: ["๐Ÿฅฉ", "๐Ÿฅ“", "๐Ÿค"]
}
// looks weird but works
JSON.parse(JSON.stringify(protein, null, "\n\t\n\0\r  "))
// SyntaxError
JSON.parse(JSON.stringify(protein, null, "๐Ÿฅ“"))

// and my favorite:
// parses as `{sh: "๐Ÿค", steak: "๐Ÿฅฉ", bacon: "๐Ÿฅ“"}`
// but breaks nested objects or arrays.
JSON.parse(JSON.stringify({ steak: "๐Ÿฅฉ", bacon: "๐Ÿฅ“" }, null, '"sh":"๐Ÿค",'))
Collapse
papagoat profile image
Terence Lucas Yap

This is awesome. Never really bothered to discover all these features. Thumbs up. :)

Collapse
samanthaming profile image
Samantha Ming Author

You're welcome! Glad you found it helpful ๐Ÿ‘

Collapse
thompcd profile image
Corey Thompson

Thank you! Saved me quite a bit of searching :)

Collapse
samanthaming profile image
Samantha Ming Author

Glad the tidbit was helpful! Thanks for reading the article ๐Ÿ˜„

Collapse
samanthaming profile image
Samantha Ming Author

Thanks! ๐Ÿ˜„