JSON.parse()
A common use of JSON is to exchange data to and from a web server.
When receiving data from a web server, the data is always in the form of a string.
To parse the data into a JavaScript object, use JSON.parse().
Example - Parsing JSON
Imagine we received this text from a web server:
'{"name":"John", "age":30, "city":"New York"}'
Use the JavaScript function JSON.parse() to convert the 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 you will get a syntax error.
Use the JavaScript object in your page:
Example:
<p id="demo"></p><script>const obj = JSON.parse('{"name":"John", "age":30, "city":"New York"}');document.getElementById("demo").innerHTML = obj.name;</script>
Array as JSON
When using JSON.parse() on a JSON string derived from an array, the method will return a JavaScript array.
Example:
const text = '["Ford", "BMW", "Audi", "Fiat"]';const myArr = JSON.parse(text);
Exceptions
Parsing Dates
Date objects are not allowed in JSON. If you need to include a date, write it as a string. You can convert it back into a date object later.
Example: Convert a string into a date:
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;Alternatively, you can use the second parameter of the JSON.parse() function, called reviver. The reviver parameter is a function that checks each property before returning the value.
Example: Convert a string into a date using the reviver function:
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;Parsing Functions
Functions are not allowed in JSON. If you need to include a function, write it as a string. You can convert it back into a function later using eval(), though this is not recommended due to security concerns.
Example: Convert a string into a function:
const text = '{"name":"John", "age":"function ()
{return 30;}", "city":"New York"}';const obj = JSON.parse(text);obj.age = eval("(" + obj.age + ")");document.getElementById("demo").innerHTML = obj.name + ", " + obj.age();
You should avoid using functions in JSON. The functions will lose their scope, and you would have to use eval() to convert them back into functions.
