← JavaScript JSON Values JavaScript JSON Stringify →

JS Web APIsLesson #184

JavaScript JSON Parse

The JSON.parse() method converts JSON text into a JavaScript value.

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

Example Code

javascript

Try it Yourself

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

Example Code

javascript

Try it Yourself

const text = '{"name":"John","age":30,"city":"New York"}';

const person = JSON.parse(text);

let name= person.name;

After parsing, object properties can be accessed with normal JavaScript syntax.

Parsing a JSON Array

Convert a JSON text into a JavaScript array.

Example

Example Code

javascript

Try it Yourself

const text = '["Ford","Volvo","BMW"]';

const cars = JSON.parse(text);

let name= cars[0];

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

Example Code

javascript

Try it Yourself

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:

Example

Example Code

javascript

Try it Yourself

'{"name":"John", "age":30, "city":"New York"}'

Use JSON.parse() to convert text string into a JavaScript object:

Example

Example Code

javascript

Try it Yourself

const text = '{"name":"John", "age":30, "city":"New York"}';

const person = JSON.parse(text);

Use data from the the object on your page:

Example

Example Code

html

Try it Yourself

// Display it in your HTML page

document.getElementById("demo").innerHTML = person.name;

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

Example Code

javascript

Try it Yourself

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

Example Code

javascript

Try it Yourself

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

Example Code

javascript

Try it Yourself

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

Example Code

javascript

Try it Yourself

{"name":"John"}

Handling Parse Errors

Use try...catch to handle invalid JSON.

Example

Example Code

javascript

Try it Yourself

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

Example Code

javascript

Try it Yourself

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

Example Code

javascript

Try it Yourself

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.