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)