DEV Community

loading...
Cover image for How to hide, remove or omit certain values or keys from the JSON.stringify() method's output in JavaScript?

How to hide, remove or omit certain values or keys from the JSON.stringify() method's output in JavaScript?

MELVIN GEORGE
Hi, I'm Melvin George, A web developer, and a blogger.
Originally published at melvingeorge.me ・3 min read

Originally posted here!

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
}
*/
Enter fullscreen mode Exit fullscreen mode

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,
};
Enter fullscreen mode Exit fullscreen mode

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
}
*/
Enter fullscreen mode Exit fullscreen mode

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
});
Enter fullscreen mode Exit fullscreen mode

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
});
Enter fullscreen mode Exit fullscreen mode

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
}
*/
Enter fullscreen mode Exit fullscreen mode

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 😃!

Feel free to share if you found this useful 😃.


Discussion (0)