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.
Note: JSON is text JSON.parse() converts JSON text into a JavaScript value.
Syntax
JSON.parse(text, reviver)
| Col 1 | Col 2 |
|---|---|
| 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
const text = '{"name":"John","age":30,"city":"New York"}';
const person = JSON.parse(text);
let name= person.name;
Note: After parsing, object properties can be accessed with normal JavaScript syntax.
Parsing a JSON Array
Convert a JSON text into a JavaScript array.
Example
const text = '["Ford","Volvo","BMW"]';
const cars = JSON.parse(text);
let name= cars[0];
Note: After parsing, you can use normal JavaScript array methods.
Parsing Other JSON Values
JSON.parse() can parse any valid JSON value.
| Col 1 | Col 2 |
|---|---|
| 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');
Common Use of JSON
A common use of JSON is to exchange data to/from a web server.
When receiving data from a web server, the data is a string:
'{"name":"John", "age":30, "city":"New York"}'
Use JSON.parse() to convert text string into a JavaScript object:
const text = '{"name":"John", "age":30, "city":"New York"}';
const person = JSON.parse(text);
Use data from the the object on your page:
Example
<p id="demo"></p>
<script>
// Display it in your HTML page
document.getElementById("demo").innerHTML = person.name;
</script>
The Reviver Function
The optional reviver argument is a callback function used to transform the parsed data.
It accepts two arguments: a property key and its value.
The return value replaces the original value:
- Transform a value: Return the transformed value.
- Leave unchanged: Return the original value.
- Delete a value: Return undefined.
Example
const text = '{"name":"John","age":"30"}';
const person = JSON.parse(text, function(key, value) {
// Convert the age to a number
if (key == "age") {
return Number(value);
}
// Return other keys/values unchanged
return value;
});
typeof person.age; // number
JSON does not support Date objects, so they are serialized as strings. A reviver can be used to convert date strings back into actual JavaScript Date instances upon parsing:
Example
let text = '{"event": "Conference", "date": "2026-07-22T11:28:00.000Z"}';
const myObject = JSON.parse(text, (key, value) => {
// Convert date string to a Date object
if (key === "date") {
return new Date(value); // Converts the string back to a Date object
}
// Return other keys/values unchanged
return value;
});
typeof myObject.date; // object
Invalid JSON
If the JSON text is not valid, JSON.parse() throws a SyntaxError.
Invalid JSON
const text = "{name:'John'}";
JSON.parse(text);
Note: 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"}
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);
}
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);
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 a JSON text. Make sure the text is in JSON format, or else you will get a syntax error.