JSON.parse()

JSON is commonly used to exchange data with a server.

When receiving server data, it is usually in string format.

We can use the JSON.parse() method to convert the data into a JavaScript object.

Syntax

JSON.parse(text[, reviver])

Parameter Description:

• text: Required, a valid JSON string.
• reviver: Optional, a function that transforms the results. This function will be called for each member of the object.

JSON Parsing Example

For example, we received the following data from the server:

{ "name":"tutorialpro", "alexa":10000, "site":"www.tutorialpro.org" }

We use the JSON.parse() method to process the above data, converting it into a JavaScript object:

var obj = JSON.parse('{ "name":"tutorialpro", "alexa":10000, "site":"www.tutorialpro.org" }');

Ensure that your data is in standard JSON format before parsing, otherwise it will result in an error.

You can use our online tool to check: https://c.tutorialpro.org/front-end/53.

After parsing, we can use the JSON data on the webpage:

Example

<p id="demo"></p>

<script>
var obj = JSON.parse('{ "name":"tutorialpro", "alexa":10000, "site":"www.tutorialpro.org" }');
document.getElementById("demo").innerHTML = obj.name + "：" + obj.site;
</script>

Receiving JSON Data from the Server

We can use AJAX to request JSON data from the server and parse it into a JavaScript object.

Example

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myObj.name;
    }
};
xmlhttp.open("GET", "/try/ajax/json_demo.txt", true);
xmlhttp.send();

View server data: json_demo.txt

Receiving Array JSON Data from the Server

If the JSON data received from the server is an array, JSON.parse will convert it into a JavaScript array:

Example

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myArr = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myArr[1];
    }
};
xmlhttp.open("GET", "/try/ajax/json_demo_array.txt", true);
xmlhttp.send();

View server data: json_demo_array.txt

Exceptions

Parsing Data

JSON cannot store Date objects.

If you need to store a Date object, you need to convert it to a string.

Then convert the string back to a Date object.

Example

var text = '{ "name":"tutorialpro", "initDate":"2013-12-14", "site":"www.tutorialpro.org"}';

var obj = JSON.parse(text);
obj.initDate = new Date(obj.initDate);

document.getElementById("demo").innerHTML = obj.name + " Creation Date: " + obj.initDate;

We can enable the second parameter of JSON.parse, reviver, a function that transforms the result, called for each member of the object.

Example

var text = '{ "name":"tutorialpro", "initDate":"2013-12-14", "site":"www.tutorialpro.org"}';
var obj = JSON.parse(text, function (key, value) {
    if (key == "initDate") {
        return new Date(value);
    } else {
        return value;
}});

document.getElementById("demo").innerHTML = obj.name + " Creation Date: " + obj.initDate;

Parsing Functions

JSON does not allow functions, but you can store functions as strings and then convert the strings back to functions.

Example

var text = '{ "name":"tutorialpro", "alexa":"function () {return 10000;}", "site":"www.tutorialpro.org"}';
var obj = JSON.parse(text);
obj.alexa = eval("(" + obj.alexa + ")");

document.getElementById("demo").innerHTML = obj.name + " Alexa Rank: " + obj.alexa();

Using functions in JSON is not recommended.

Browser Support

All major browsers support the JSON.parse() function:

Older browsers can use a third-party library for support: https://github.com/douglascrockford/JSON-js