Json Stringify
Dec 31st, 2021 - written by Kimserey with .
When doing web development, we often use JSON.stringify to print to the screen the value of a variable. But when the variable contains multiple attributes, the print could be quite dense. To cater for that JSON.stringify has extra parameters that can be specified. In today’s post, we will look at each of them with example.
JSON.stringify
In this example we will use an example React application which will display a stringified JSON:
1
<div id="app"></div>
One of the trick to display JSON in HTML is to use <pre> tag:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
class ExampleApp extends React.Component {
constructor(props) {
super(props);
this.value = {
name: "kim",
books: [
{
title: "Learn JavaScript",
year: "2005",
bookmarks: [{ page: 123 }, { page: 400 }],
},
{ title: "Learn React", year: "2010" },
],
};
}
render() {
return <pre>{JSON.stringify(this.value)}</pre>;
}
}
ReactDOM.render(<ExampleApp />, document.querySelector("#app"));
A <pre> or ‘preformatted text element’ will render the whitespace, linebreak and tabulation.
Here to display the JSON we simply directly stringify the value which will get displayed in one line:
1
{"name":"kim","books":[{"title":"Learn JavaScript","year":"2005","bookmarks":[{"page":123},{"page":400}]},{"title":"Learn React","year":"2010"}]}
Although it is useful for small object, in our case we have multiple levels which makes it hard to read.
JSON.stringify has other parameters allowing us to provide the indentation.
1
JSON.stringify(this.value, undefined, 2);
Specifying 2 as the last parameter will provide a 2 spaces indentation on each level. Our preformatted text element will then display the JSON as we want it:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
"name": "kim",
"books": [
{
"title": "Learn JavaScript",
"year": "2005",
"bookmarks": [
{
"page": 123
},
{
"page": 400
}
]
},
{
"title": "Learn React",
"year": "2010"
}
]
}
The second parameter which we specified as undefined is a replacer. It can be used to either break an infinite loop to be able to stringify values which otherwise wouldn’t be able to be stringified.
We can either specify an array of strings which will serve as allow list:
1
JSON.stringify(this.value, ["books", "title"], 2);
this will display the following:
1
2
3
4
5
6
7
8
9
10
{
"books": [
{
"title": "Learn JavaScript"
},
{
"title": "Learn React"
}
]
}
or we can specify a function which can be used to modify the serialized value:
1
2
3
4
5
6
7
JSON.stringify(this.value, (key, value) => {
if (key === 'year') {
return undefined;
}
return value;
}, 2) }
this can be used to remove some of the values:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
"name": "kim",
"books": [
{
"title": "Learn JavaScript",
"bookmarks": [
{
"page": 123
},
{
"page": 400
}
]
},
{
"title": "Learn React"
}
]
}}
And that concludes today’s post! I hope you liked this one and I’ll see you on the next one!