Indenting JSON.stringify’s Output
Tags: javascript, codenewbie, programming, howto
Published: 2020-12-29 15:13:43

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:

```JavaScript
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:

```JavaScript
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:

```JavaScript
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:

```JavaScript
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:

```JavaScript
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](https://twitter.com/oliverjumpertz), and perhaps you’ll like what you see!