JSON replacer is recursive. This then means it uses the same array for all objects it comes across. In other words, it uses the same values to map BAD.g's value. Since, Bad.g's value does not have any keys matching the ones you provided, nothing will get mapped properly. This means we have to add "2" to your array. Now "2" also has an object with different keys. We have already accounted for "b", so now we just need to add "w" to your array.
When providing an array to the replacer, best to think of the array as a list of all the keys you want mapped.
DEMO: http://jsfiddle.net/dirtyd77/whv7x6xc/4/
console.log(JSON.stringify(BAD, ['a', 'b', 'c', 'd', 'e', 'g', '2', 'w']));
Hope this helps and let me know if you have any questions.
Here is also a snippet from the documentation,
If you return any other object, the object is recursively stringified into the JSON string, calling the replacer function on each property, unless the object is a function, in which case nothing is added to the JSON string.
In the case for dynamic keys, you can always create a function to push to an array and use that array for your whitelist. Here is an example:
DEMO: http://jsfiddle.net/dirtyd77/whv7x6xc/5/
var BAD = {
"a": "2",
"b": 1,
"c": "Nexus",
"d": "Alligator",
"e": 5,
"f": 1431807036,
"g": {
"2": {
"w": 17,
"b": 5
}
}
}
var whitelist = [];
iterate(BAD);
console.log(whitelist, JSON.stringify(BAD, whitelist));
function iterate(obj){
for(var key in obj){
// may have to do some checking to ignore any keys you don't care about
whitelist.push(key);
// if value is an object, will use this same function to push to whitelist array
if(typeof obj[key] === 'object'){
return iterate(obj[key]);
}
}
}
You can also just use your existing whitelist and just append keys on your g key (given that isn't dynamic):
DEMO: http://jsfiddle.net/dirtyd77/whv7x6xc/6/
var whitelist = ['a', 'b', 'c', 'd', 'e', 'g'];
iterate(BAD.g);
console.log(whitelist, JSON.stringify(BAD, whitelist));
function iterate(obj){
for(var key in obj){
whitelist.push(key);
if(typeof obj[key] === 'object'){
return iterate(obj[key]);
}
}
}
JSON replacer is recursive. This then means it uses the same array for all objects it comes across. In other words, it uses the same values to map BAD.g's value. Since, Bad.g's value does not have any keys matching the ones you provided, nothing will get mapped properly. This means we have to add "2" to your array. Now "2" also has an object with different keys. We have already accounted for "b", so now we just need to add "w" to your array.
When providing an array to the replacer, best to think of the array as a list of all the keys you want mapped.
DEMO: http://jsfiddle.net/dirtyd77/whv7x6xc/4/
console.log(JSON.stringify(BAD, ['a', 'b', 'c', 'd', 'e', 'g', '2', 'w']));
Hope this helps and let me know if you have any questions.
Here is also a snippet from the documentation,
If you return any other object, the object is recursively stringified into the JSON string, calling the replacer function on each property, unless the object is a function, in which case nothing is added to the JSON string.
In the case for dynamic keys, you can always create a function to push to an array and use that array for your whitelist. Here is an example:
DEMO: http://jsfiddle.net/dirtyd77/whv7x6xc/5/
var BAD = {
"a": "2",
"b": 1,
"c": "Nexus",
"d": "Alligator",
"e": 5,
"f": 1431807036,
"g": {
"2": {
"w": 17,
"b": 5
}
}
}
var whitelist = [];
iterate(BAD);
console.log(whitelist, JSON.stringify(BAD, whitelist));
function iterate(obj){
for(var key in obj){
// may have to do some checking to ignore any keys you don't care about
whitelist.push(key);
// if value is an object, will use this same function to push to whitelist array
if(typeof obj[key] === 'object'){
return iterate(obj[key]);
}
}
}
You can also just use your existing whitelist and just append keys on your g key (given that isn't dynamic):
DEMO: http://jsfiddle.net/dirtyd77/whv7x6xc/6/
var whitelist = ['a', 'b', 'c', 'd', 'e', 'g'];
iterate(BAD.g);
console.log(whitelist, JSON.stringify(BAD, whitelist));
function iterate(obj){
for(var key in obj){
whitelist.push(key);
if(typeof obj[key] === 'object'){
return iterate(obj[key]);
}
}
}
The replacer argument is deep, in that it affects the stringification of all properties, even if they're not on the first level. If you add "2" to the array, you'll see that the object is stringified, minus "w", because "w" is not allowlisted by replacer.
JSON.stringify(BAD, ['a', 'b', 'c', 'd', 'e', 'g', '2'])
Consider why you are using replacer. If you are using it to blocklist, instead of allowlist, you might be better served by passing in a function as opposed to an array.
JSON.stringify(BAD, function replacer(key, value) {
var blocklist = ['b', 'g']
return blocklist.indexOf(key) === -1 ? value : undefined
})
Videos
Hello. I got a little confuse with FIRST argument that return JSON.stringify function replacer.So if I go:
let obj = {
a: 5,
b: 10
}
JSON.stringify(obj, (key, value) => {
if (key !== 'a') {
return value;
}
})It'll fine
"{"b":10}"But if I change function like this:
JSON.stringify(obj, (key, value) => {
if (key === 'a') {
return value;
}
})It returns undefined. Why? I think the point is that replacer function in first call get kinda anonymous object where key is <empty string> and value is {a: 5, b: 10}. And this anonymous object is very important for parsing to JSON string. And that's why second version, where passing only key === 'a', doesn't let this anonymous object return. Am I right?
Its quite old but just to complete it.
According to this Q/A and the MDN JSON.stringify article, the replacer is called with instance of the object in which the key was found so no need to change prototype or do another tricks:
function log(what) {
what = what || "";
document.getElementById("out").innerText += what + "\n";
}
function replacer(key, value) {
console.log(this);
log("Key: '" + key + "' = '" + value + "'");
log("this = " + this);
log("this[key] = " + this[key]);
log("this[key] instanceof Date = " + (this[key] instanceof Date));
log("this instanceof Date = " + (this[key] instanceof Date));
if (this[key] instanceof Date) {
return "This was a date: " + this[key].getTime();
}
return value;
}
var obj = {
d: new Date()
};
var result;
result = JSON.stringify(new Date(), replacer);
log();
log(result);
log();
result = JSON.stringify(obj, replacer);
log();
log(result);<pre id="out"></pre>Perhaps you could do your formatting before passing the object to JSON, but otherwise here is a possibility:
JSON uses an objects toJSON method before calling the replacer.
So, before calling stringify store the toJSON method and then restore it afterwards.
var object = {
date: new Date()
},
storeToJSON = Date.prototype.toJSON;
delete Date.prototype.toJSON;
JSON.stringify(object, function (key, value) {
console.log('---');
console.log('key:', key);
console.log('value:', value);
console.log('value instanceof Date:', value instanceof Date);
return value;
});
Date.prototype.toJSON = storeToJSON;
On jsFiddle