To hide, remove or omit certain values from the output of the JSON.stringify() method, we can pass a replacer function as a second argument to the method in JavaScript.
TL;DR
// a simple object
const personDetails = {
name: "John Doe",
age: 23,
pin: 686612,
mob: 9445678654,
};
// Stringify personDetails object
// using JSON.stringify() method
const personDeatilsStr = JSON.stringify(personDetails, (key, value) => {
// Check if key matches the string "pin" or "mob"
// if matched return value "undefined"
if (key === "pin" || key === "mob") {
return undefined;
}
// else return the value itself
return value;
});
console.log(personDeatilsStr);
/*
OUTPUT
------
{
"name":"John Doe",
"age":23
}
*/
For example, let's say we have an object called personDeatils with some values like the person's name, age, pin, mob, etc like this,
// a simple object
const personDetails = {
name: "John Doe",
age: 23,
pin: 686612,
mob: 9445678654,
};
Now let's use the JSON.stringify() method and pass the personDetails object as the first argument to the method like this,
// a simple object
const personDetails = {
name: "John Doe",
age: 23,
pin: 686612,
mob: 9445678654,
};
// Stringify personDetails object
// using JSON.stringify() method
const personDeatilsStr = JSON.stringify(personDetails);
/*
OUTPUT
------
{
"name":"John Doe",
"age":23,
"pin":686612,
"mob":9445678654
}
*/
As you can see from above the output contains a stringified version of the personDetails object.
Now, what if we don't need the pin and mob keys from the personDetails object in the stringified output?
To achieve that we can pass a replacer function as the second argument to the JSON.stringify() method like this,
// a simple object
const personDetails = {
name: "John Doe",
age: 23,
pin: 686612,
mob: 9445678654,
};
// Stringify personDetails object
// using JSON.stringify() method
const personDeatilsStr = JSON.stringify(personDetails, () => {
// cool stuff here
});
The replacer function will be passed the current name of the key getting looped as the first argument and the current key value as the second argument. It will look like this,
// a simple object
const personDetails = {
name: "John Doe",
age: 23,
pin: 686612,
mob: 9445678654,
};
// Stringify personDetails object
// using JSON.stringify() method
const personDeatilsStr = JSON.stringify(personDetails, (key, value) => {
// replacer function with key as first argument
// and value as second argument
});
Now inside the function, we can check to see if the key matches the string pin or mob. If the string is matched we can return the value undefined so that the JSON.stringify() method knows to omit or remove the keys. If it doesn't match we can return the value itself
It can be done like this,
// a simple object
const personDetails = {
name: "John Doe",
age: 23,
pin: 686612,
mob: 9445678654,
};
// Stringify personDetails object
// using JSON.stringify() method
const personDeatilsStr = JSON.stringify(personDetails, (key, value) => {
// Check if key matches the string "pin" or "mob"
// if matched return value "undefined"
if (key === "pin" || key === "mob") {
return undefined;
}
// else return the value itself
return value;
});
console.log(personDeatilsStr);
/*
OUTPUT
------
{
"name":"John Doe",
"age":23
}
*/
Now if we look at the output, we can see that the key pin and mob are removed from the output string.
And we have successfully removed the keys! 🎊
See the above code live in JSBin
That's all 😃!