Indenting JSON.stringify’s Output

You may already have used JSON.stringify a few times already. There’s nearly no better way to quickly log your JavaScript objects and take a look if they have the structure you expect them to have.
But did you know that you can customize and control the indentation of the output?

Usual Usage

You can usually use JSON.stringify like this:

const obj = {
  propertyOne: 1,
  propertyTwo: “2”,
  propertyThree: {
    nestedPropertyOne: 1.123
  }
};

console.log(JSON.stringify(obj));
// prints => {"propertyOne":1,"propertyTwo":"2","propertyThree":{"nestedPropertyOne":1.123}}

It works perfectly fine, but the larger your objects are, the harder reading the output becomes. There must be something to help you with making larger objects readable again.

JSON.stringify’s Syntax

Let’s take a look at what JSON.stringify actually offers.

Syntax

JSON.stringify(value[, replacer[, space]])

Parameters

value

This is the value to convert to a JSON string. You’ll always need this one.

replacer

Either a function or an array of strings or numbers that alter the behavior of the serialization. This seems to be an interesting parameter, but not one that could help you with the current problem.

space

Either a string or a number.

If a number, defines the amount of white space to add for indentation (max 10).

If a string, can contain up to 10 characters used to indent the output.

This is the parameter that helps you make those large objects readable again.

Using The Space Parameter

You could add an indentation of two white spaces like so:

const obj = {
  propertyOne: 1,
  propertyTwo: “2”,
  propertyThree: {
    nestedPropertyOne: 1.123
  }
};

// Using 2 is basically the same as using “  “.
console.log(JSON.stringify(obj, null, 2));
// prints =>
// {
//   "propertyOne": 1,
//   "propertyTwo": "2",
//   "propertyThree": {
//     "nestedPropertyOne": 1.123
//   }
// } 

And if you like tabs more, you can simply do it like this:

const obj = {
  propertyOne: 1,
  propertyTwo: “2”,
  propertyThree: {
    nestedPropertyOne: 1.123
  }
};

console.log(JSON.stringify(obj, null, “\t”));
// prints =>
// {
//  "propertyOne": 1,
//  "propertyTwo": "2",
//  "propertyThree": {
//      "nestedPropertyOne": 1.123
//  }
// } 

You can pass nearly any character or combination of characters as the space argument:

const obj = {
  propertyOne: 1,
  propertyTwo: “2”,
  propertyThree: {
    nestedPropertyOne: 1.123
  }
};

console.log(JSON.stringify(obj, null, “....”));
// prints =>
// {
// ...."propertyOne": 1,
// ...."propertyTwo": "2",
// ...."propertyThree": {
// ........"nestedPropertyOne": 1.123
// ....}
// } 

And even emojis:

const obj = {
  propertyOne: 1,
  propertyTwo: “2”,
  propertyThree: {
    nestedPropertyOne: 1.123
  }
};

console.log(JSON.stringify(obj, null, “⏩”));
// prints =>
// {
//  ⏩"propertyOne": 1,
//  ⏩"propertyTwo": "2",
//  ⏩"propertyThree": {
//  ⏩⏩"nestedPropertyOne": 1.123
//  ⏩}
// } 

Looks great, doesn’t it? It’s pretty simple, straight-forward, and enables you to quickly format your output in a readable way. But keep in mind that this (and especially using emojis) is more something for debugging, and not something you should do at remote interfaces (like a REST/GraphQL API, be it server or client).

Before you leave

If you like my content, visit me on Twitter, and perhaps you’ll like what you see!