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!