Skip to content

JSON.parse() and JSON.stringify()

JSON.stringify() and JSON.parse() are two useful tools for handling JSON-formatted content in JavaScript

JSON.stringify()

//SYNTAX
JSON.stringify(value[, replacer[, space]])

The JSON.stringify() method converts a JavaScript object or value to a JSON string, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replacer array is specified.

console.log(JSON.stringify({ age: 25, height: 166, weight:65 }));
// expected output: "{"age":25,"height":166,"weight":65}"
const employee = {
  id: 117,
  name: "Anand",
  email: "me@anand.com"
};

function replacer(key, value) {
  if (typeof value === "number") {
    return value * 2;
  }
  if (key === "email") {
    return "Emails are masked.";
  }
  return value;
}

console.log(JSON.stringify(employee));
// result: {"id":117,"name":"Anand","email":"me@anand.com"}

console.log(JSON.stringify(employee, replacer));
// {"name":"Anand","email":"Emails are masked."}

console.log(JSON.stringify(employee, null, "^_^ "));
// result: {
// ^_^ "id": 117,
// ^_^ "name": "Anand",
// ^_^ "email": "me@anand.com"
// }

console.log(JSON.parse(JSON.stringify(employee)));
// result: Object {id: 117, name: "Anand", email: "me@anand.com"}

JSON.parse()

//SYNTAX
JSON.parse(text[, reviver])

The JSON.parse() method parses a JSON string, constructing the JavaScript value or object described by the string.

An optional reviver function can be provided to perform a transformation on the resulting object before it is returned.

var json = '{"name":"Anand", "id":117}';
obj = JSON.parse(json);

console.log(obj.name);
// expected output: Anand

console.log(obj.id);
// expected output: 117

If the reviverparameter is specified, the parsed value is transformed before being returned. If the reviver only transforms some values and not others, you should make sure you return all untransformed values as-is, otherwise they will be deleted from the resulting object.

JSON.parse('{"Age": 15}', (key, value) => {
  console.log(key); // log the current property name".
  return value * 3;     // return value * 3
});

// Age
// { Age: 45 }

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.