JavaScript JSON Parse
The JSON.parse() method converts JSON text into a JavaScript value.
After parsing, the value can be used like any other JavaScript value.
Remember: JSON is text.
JSON.parse() converts that text into a JavaScript value.
Syntax
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
A JSON object becomes a JavaScript object.
Example
const text = '{"name":"John","age":30,"city":"New York"}';
const person = JSON.parse(text);
document.getElementById("demo").innerHTML = person.name;
After parsing, object properties can be accessed with normal JavaScript syntax.
Parsing a JSON Array
A JSON array becomes a JavaScript array.
Example
const text = '["Ford","Volvo","BMW"]';
const cars = JSON.parse(text);
document.getElementById("demo").innerHTML = cars[0];
After parsing, you can use all 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
let value;
value = JSON.parse('"John"');
value = JSON.parse('42');
value = JSON.parse('true');
value = JSON.parse('null');
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 property names are not enclosed in double quotes and strings use single quotes.
Handling Parse Errors
Use try...catch to handle invalid JSON.
Example
const text = "{name:'John'}";
try {
const person = JSON.parse(text);
}
catch(err) {
document.getElementById("demo").innerHTML = err.message;
}
The Reviver Function
The optional reviver function is 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;
The example converts the string "30" into the number 30.
JSON.parse() Summary
JSON.parse()converts JSON text into a JavaScript value.- JSON objects become JavaScript objects.
- JSON arrays become JavaScript arrays.
- Strings, numbers, Booleans, and
nullare also valid JSON values. - Invalid JSON throws a
SyntaxError. - The optional
reviverfunction can transform parsed values.
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);
Call JSON.parse() only when the value is JSON text.
