JavaScript JSON Parse
The JSON.parse() Method
The JSON.parse() method converts JSON text into a JavaScript value.
After parsing, the value can be used like any other JavaScript value.
JSON is text
JSON.parse() converts JSON text into a JavaScript value.
Syntax
JSON.parse(text, reviver)
| Parameter | Description |
|---|---|
| text | The JSON text to parse. |
| reviver | An optional function that transforms parsed values. |
Parsing a JSON Object
Convert a JSON text into a JavaScript object.
Example
A JSON object becomes a JavaScript object.
const text = '{"name":"John","age":30,"city":"New York"}';
const person = JSON.parse(text);
let name= person.name;
Try it Yourself »
After parsing, object properties can be accessed with normal JavaScript syntax.
Parsing a JSON Array
Convert a JSON text into a JavaScript array.
Example
A JSON array becomes a JavaScript array.
const text = '["Ford","Volvo","BMW"]';
const cars = JSON.parse(text);
let name= cars[0];
Try it Yourself »
After parsing, you can use normal JavaScript array methods.
Parsing Other JSON Values
JSON.parse() can parse any valid JSON value.
| JSON Text | JavaScript Value |
|---|---|
| "John" | String |
| 42 | Number |
| true | Boolean |
| null | null |
| [1,2,3] | Array |
| {"x":1} | Object |
Example
Convert any JSON text into a JavaScript value.
let value;
value = JSON.parse('"John"');
value = JSON.parse('42');
value = JSON.parse('true');
value = JSON.parse('null');
Try it Yourself »
Invalid JSON
If the JSON text is not valid, JSON.parse() throws a SyntaxError.
Invalid JSON
const text = "{name:'John'}";
JSON.parse(text);
The example above is invalid because of 2 reasons:
Property names are not enclosed in double quotes.
Strings cannot use single quotes.
Valid
{"name":"John"}
Invalid
{'name':"John"}
{"name":'John'}
{name:"John"}
{"name":John}
Handling Parse Errors
Use try...catch to handle invalid JSON.
Example
const text = "{name:'John'}";
try {
const person = JSON.parse(text);
}
catch(err) {
myDisplayer(err);
}
Try it Yourself »
The Reviver Function
An optional reviver function can be called for every parsed property.
The return value replaces the original value.
Example
const text = '{"name":"John","age":"30"}';
const person = JSON.parse(text, function(key, value) {
if (key == "age") {
return Number(value);
}
return value;
});
document.getElementById("demo").innerHTML =
typeof person.age;
Try it Yourself »
The example converts the string "30" into the number 30.
Common Parsing Mistakes
Parsing a JavaScript Object
JSON.parse() expects JSON text, not a JavaScript object.
Wrong
const person = {name: "John"};
const result = JSON.parse(person);
Correct
const text = '{"name":"John"}';
const person = JSON.parse(text);
Parsing JSON Twice
After JSON has been parsed, the result is already a JavaScript value.
Wrong
const person = JSON.parse('{"name":"John"}');
const result = JSON.parse(person);
Note
Call JSON.parse() only when the value is JSON text.
