How To Use JSON.parse() and JSON.stringify()

js-json-parse-stringify
Global_Objects
javascript-json-parse-method

JSON.parse()

object’s values are transformed to uppercase

JSON.stringify()

replacer function

document.getElementById("GFG").innerHTML

        = obj.var1 + " " + obj.var2;

The JSON object, available in all modern browsers, has two useful methods to deal with JSON-formatted content: parse and stringify.

JSON.parse()
JSON.parse() takes a JSON string and transforms it into a JavaScript object.

let userStr = '{"name":"Sammy","email":"sammy@example.com","plan":"Pro"}';

let userObj = JSON.parse(userStr);

console.log(userObj);

Executing this code will produce the following output:

Output

{name: 'Sammy', email: 'sammy@example.com', plan: 'Pro'}
  email: "sammy@example.com"
  name: "Sammy"
  plan: "Pro"

Trailing commas are not valid in JSON, so JSON.parse() throws an error if the string passed to it has trailing commas.

JSON.parse() can take a function as a second argument that can transform the object values before they are returned.

Here the object’s values are transformed to uppercase in the returned object of the parse method:

let userStr = '{"name":"Sammy","email":"sammy@example.com","plan":"Pro"}';

let userObj = JSON.parse(userStr, (key, value) => {
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  return value;
});

console.log(userObj);

Executing this code will produce the following output:

Output

{name: 'SAMMY', email: 'SAMMY@EXAMPLE.COM', plan: 'PRO'}
  email: "SAMMY@EXAMPLE.COM"
  name: "SAMMY"
  plan: "PRO"

The values have been transformed to uppercase characters.

JSON.stringify()
JSON.stringify() takes a JavaScript object and transforms it into a JSON string.

let userObj = {
  name: "Sammy",
  email: "sammy@example.com",
  plan: "Pro"
};

let userStr = JSON.stringify(userObj);

console.log(userStr);

Executing this code will produce the following output:

Output

{"name":"Sammy","email":"sammy@example.com","plan":"Pro"}

JSON.stringify() can take two additional arguments. The first one is a replacer function. The second is a String or Number value to use as a space in the returned string.

The replacer function can be used to filter out values, as any value returned as undefined will be out of the returned string:

let userObj = {
  name: "Sammy",
  email: "sammy@example.com",
  plan: "Pro"
};

function replacer(key, value) {
  console.log(typeof value);
  if (key === 'email') {
    return undefined;
  }
  return value;
}

let userStrReplacer = JSON.stringify(userObj, replacer);

console.log(userStrReplacer);

Executing this code will produce the following output:

Output

{"name":"Sammy","plan":"Pro"}

The email key-value pair has been removed from the object.

And an example with a space argument passed-in:

let userObj = {
  name: "Sammy",
  email: "sammy@example.com",
  plan: "Pro"
};

let userStrSpace = JSON.stringify(user, null, '...');

console.log(userStrSpace);

Executing this code will produce the following output:

Output

{
..."name": "Sammy",
..."email": "sammy@example.com",
..."plan": "Pro"
}

JavaScript JSON parse() Method

The JSON.parse() method in JavaScript is used to parse a JSON string which is written in a JSON format and returns a JavaScript object.

Syntax:

JSON.parse( string, function )

Parameters: This method accepts two parameters as mentioned above and described below:

string: It is a required parameter and it contains a string that is written in JSON format.
function: It is an optional parameter and is used to transform results. The function called for each item.
Return Value: This method returns an object corresponding to the given JSON text.

var obj = JSON.parse('{"var1":"Geeks","var2":"forGeeks!"}');

    console.log(obj.var1 + " " + obj.var2);

Output:

GeeksforGeeks!

<h1 style="color:green">
    GeeksforGeeks
</h1>
<h2>
    JavaScript JSON parse() Method
</h2>

<p id="GFG"></p>

<!-- Script to parse a string and return
        JavaScript object -->
<script>
    var obj = JSON.parse('{"var1":"Hello","var2":"Geeks!"}');

    document.getElementById("GFG").innerHTML
            = obj.var1 + " " + obj.var2;
</script>
</body>

</html>

Example 3: This example uses the reviver function to parse a string and return the JavaScript object.

<h1 style="color:green">
    GeeksforGeeks
</h1>
<h2>
    JavaScript JSON parse() Method
</h2>

<p id="GFG"></p>

<!-- Script to parse a string and return
        JavaScript object -->
<script>
    var text = '{ "var1":"Amanda", "gender":"male"}';

    var obj = JSON.parse(text, function (key, value) {
        if (value == "male") {
            return ("female");
        } else {
            return value;
        }
    });
    document.getElementById("GFG").innerHTML
            = obj.var1 + ", " + obj.gender;
</script>

const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);

console.log(obj.count);
// Expected output: 42

console.log(obj.result);
// Expected output: true

output