Do you know that JSON.stringify
can actually take 2 other parameters? I didn't know this before I laid my eyes on my colleage's pull request.(I'm such a noob) But it's nothing difficult. Those 2 parameters will help optimize the result in a good format.
In my opinion, the usage of JSON.stringify
parameters is never a rare case. Well, let's take a look at those "I-didn't-know" features that "educated" me.
Visit https://pitayan.com/posts/json-stringify-params/ to read original article. We also have beautiful source code highlights.
1. Replacer: Filtering your properties
This parameter is of course optional
by default. By assigning Array
of Number
or String
, the output JSON will return the stringified properties given in the Array
.
const obj = {
"site": "Pitayan",
"url": "https://pitayan.com",
100: 100
}
JSON.stringify(obj, ['site', 100])
// "{\"site\":\"Pitayan\",\"100\":100}"
This is extremely helpful when I only some of the properties inside the Object
.
But it comes to negations, the 2nd parameter will not provide any help. Well, I suppose this is how this API is designed initially. In such case, it's better to handle the Object
properties before JSON.stringify
.
2. Space: Formatting the string JSON
JSON.stringify
offers another useful parameter which allows use to format the string output with whitespaces.
Frankly speaking, I don't quite need it, since I could print out the Object in the browser console directly.
But it is truely helpful when the JSON data is big enough, and I'm printing out data in the terminal.
// Without formatter
JSON.stringify(obj)
// "{\"site\":\"Pitayan\","url\":\"https://pitayan.com\",\"100\":100}"
This looks prettier, isn't it?
// With formatter
JSON.stringify(obj, null, 2)
// "{
// \"100\": 100,
// \"site\": \"Pitayan\",
// \"url\": \"https://pitayan.com\"
// }"
3. toJSON
After I realised that there are 2 parameters for JSON.stringify
, I decided to take a look at the official document. Then I found that an Object
can define a method to control the behavior of JSON.stringify
.
It's intercepting the stringify
process and a proper String
value must be returned from toJSON
method. Otherwise, the output is undefined
.
toJSON
receives an argument which is the key of the target Object
if it's nested within another one.
const objToJSON = {
"site": "pitayan",
"url": "https://pitayan.com",
toJSON: function (key) {
if (key) {
return `[${key}]: ${this.site} -- ${this.url}`
} else {
return `${this.site} -- ${this.url}`
}
}
}
JSON.stringify(objToJSON)
// "\"pitayan -- https://pitayan.com\""
JSON.stringify({ objToJSON })
// "{\"objToJSON\":\"[objToJSON]: pitayan -- https://pitayan.com\"}"
Okay, this is all for JSON.stringify
. Hope this article will help everyone gain some knowledge about this usefull API.
If you think this article is great, please do share it on the social network. Thanks for reading!
References
Originally on Pitayan.com
https://pitayan.com/posts/json-stringify-params/
Top comments (0)