YouTipJson Parse
JSON is commonly used to exchange data with a server.
When receiving data from a server, it is usually a string.
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 result. This function will be called for each member of the object.
* * *
## JSON Parsing Example
For example, we receive the following data from the server:
{"name":"", "alexa":10000, "site":"www."}
We use the JSON.parse() method to process the above data and convert it into a JavaScript object:
var obj = JSON.parse('{ "name":"", "alexa":10000, "site":"www." }');
> Before parsing, ensure your data is in standard JSON format, otherwise, parsing will fail.
>
>
> You can use our online tool to check: [https://www.jyshare.com/front-end/53](https://www.jyshare.com/front-end/53).
After parsing is complete, we can use the JSON data on the webpage:
## Example
var obj = JSON.parse('{ "name":"", "alexa":10000, "site":"www." }'); document.getElementById("demo").innerHTML = obj.name + "οΌ" + obj.site;
[Try it Β»](#)
* * *
## Receiving JSON Data from a Server
We can use AJAX to request JSON data from a 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();
[Try it Β»](#)
View server data: [json_demo.txt](#)
* * *
## Receiving Array JSON Data from a 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; }}; xmlhttp.open("GET", "/try/ajax/json_demo_array.txt", true); xmlhttp.send();
[Try it Β»](#)
View server data: [json_demo_array.txt](#)
* * *
## Exceptions
### Parsing Data
JSON cannot store Date objects.
If you need to store Date objects, you need to convert them to strings first.
Then convert the string back to a Date object.
## Example
var text = '{ "name":"", "initDate":"2013-12-14", "site":"www."}'; var obj = JSON.parse(text); obj.initDate = new Date(obj.initDate); document.getElementById("demo").innerHTML = obj.name + "Creation Date: " + obj.initDate;
[Try it Β»](#)
We can enable the second parameter of JSON.parse, the reviver, a function that transforms the result. This function will be called for each member of the object.
## Example
var text = '{ "name":"", "initDate":"2013-12-14", "site":"www."}'; 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;
[Try it Β»](#)
* * *
## Parsing Functions
JSON does not allow functions, but you can store functions as strings and then convert the strings back into functions.
## Example
var text = '{ "name":"", "alexa":"function () {return 10000;}", "site":"www."}'; var obj = JSON.parse(text); obj.alexa = eval("(" + obj.alexa + ")"); document.getElementById("demo").innerHTML = obj.name + " Alexa Ranking: " + obj.alexa();
[Try it Β»](#)
It is not recommended to use functions in JSON.
* * *
## Browser Support
All modern browsers support the JSON.parse() function:
| | | | | |
| --- | --- | --- | --- | --- |
| Support | 8.0 | 3.5 | 4.0 | 10.0 |
Older browsers can use third-party libraries for support: [https://github.com/douglascrockford/JSON-js](https://github.com/douglascrockford/JSON-js)