JSON Parse

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

JSON Parse

JSON is commonly used to exchange data to/from a web server.

When receiving data from a web server, the data is always a string.

Parse the data with JSON.parse(), and the data is a JavaScript object.

Example – Parsing JSON

Imagine that we have received this text from a web server:

‘{“name”:”John”, “age”:30, “city”:”New York”}’

Use the JavaScript function JSON.parse() to convert text into a JavaScript object:

const obj = JSON.parse(‘{“name”:”John”, “age”:30, “city”:”New York”}’);

Make sure the text is in JSON format, or else you will get a syntax error.

Use the JavaScript object on your page:

Example

<!DOCTYPE html>

<html>

<body>

<h2>Creating an Object from a JSON String</h2>

<p id=”demo”></p>

<script>

const txt = ‘{“name”:”John”, “age”:30, “city”:”New York”}’

const obj = JSON.parse(txt);

document.getElementById(“demo”).innerHTML = obj.name + “, ” + obj.age;

</script>

</body>

</html>

Output

Creating an Object from a JSON String

Array as JSON

Using the JSON.parse() on a JSON derived from an array, the method is used to return a JavaScript array, instead of a JavaScript object.

Example

<!DOCTYPE html>

<html>

<body>

<h2>Parsing a JSON Array.</h2>

<p>Data written as a JSON array will be parsed into a JavaScript array.</p>

<p id=”demo”></p>

<script>

const text = ‘[ “Ford”, “BMW”, “Audi”, “Fiat” ]’;

const myArr = JSON.parse(text);

document.getElementById(“demo”).innerHTML = myArr[0];

</script>

</body>

</html>

Output

Parsing a JSON Array.

Data written as a JSON array will be parsed into a JavaScript array.

Ford

Exceptions

Parsing Dates

Date objects are not permitted in JSON.

To include a date, write it as a string.

You can convert it back into a date object later:

Example

<!DOCTYPE html>

<html>

<body>

<h2>Convert a string into a date object.</h2>

<p id=”demo”></p>

<script>

const text = ‘{“name”:”John”, “birth”:”1986-12-14″, “city”:”New York”}’;

const obj = JSON.parse(text);

obj.birth = new Date(obj.birth);

document.getElementById(“demo”).innerHTML = obj.name + “, ” + obj.birth;

</script>

</body>

</html>

Output

Convert a string into a date object.

John, Sun Dec 14 1986 05:30:00 GMT+0530 (India Standard Time)

you can use the second parameter, of the JSON.parse() function, called reviver.

The reviver parameter is a function that goes through each property, before returning the value.

Example

<!DOCTYPE html>

<html>

<body>

<h2>Convert a string into a date object.</h2>

<p id=”demo”></p>

<script>

const text = ‘{“name”:”John”, “birth”:”1986-12-14″, “city”:”New York”}’;

const obj = JSON.parse(text, function (key, value) {

  if (key == “birth”) {

    return new Date(value);

  } else {

    return value;

  }

});

document.getElementById(“demo”).innerHTML = obj.name + “, ” + obj.birth;

</script>

</body>

</html>

Output

Convert a string into a date object.

John, Sun Dec 14 1986 05:30:00 GMT+0530 (India Standard Time)