How to Parse JSON in JavaScript

Use JSON.parse() when JSON data arrives as a string and your code needs to turn it into a real JavaScript object or array. This is the standard step for API payloads, local storage, and backend responses.

What you’ll build or solve

You’ll learn how to parse JSON in JavaScript using JSON.parse(). You’ll also know how to safely handle invalid JSON and work with the parsed result.

When this approach works best

This approach is the right choice when structured data arrives as plain text.

Common real-world scenarios include:

• API string payloads
• Local storage values
• Config files
• Embedded backend data
• Cached user settings

This is a bad idea when the data is already a JavaScript object, such as the result of response.json().

Prerequisites

You only need:

• A JavaScript file or browser console
• A valid JSON string
• Basic objects and arrays knowledge

Step-by-step instructions

Step 1: Pass the JSON string into JSON.parse()

Start with a valid JSON string.

const jsonString = '{"name":"Alex","role":"admin"}';

Use JSON.parse() to convert it into a real object.

const user = JSON.parse(jsonString);

console.log(user.name);

This also works for arrays.

const list = JSON.parse('["HTML", "CSS", "JavaScript"]');
console.log(list[0]);

Wrap parsing in try...catch when the source may be invalid.

try {
  const data = JSON.parse(rawData);
} catch (error) {
  console.error("Invalid JSON");
}

What to look for:

• Input must be a JSON string
• Output becomes a real object or array
• Great for local storage and backend payloads
• Invalid JSON throws an error
• Use try...catch for unknown input

Examples you can copy

Parse user object

const user = JSON.parse('{"name":"Mia"}');

Parse array

const skills = JSON.parse('["HTML","CSS"]');

Local storage settings

const settings = JSON.parse(localStorage.getItem("settings"));

Common mistakes and how to fix them

Mistake 1: Parsing an object instead of a string

What the reader might do:

const user = { name: "Alex" };
JSON.parse(user);

Why it breaks: JSON.parse() expects a string.

Corrected approach:

Pass only JSON strings.

Mistake 2: Invalid JSON quotes

What the reader might do:

JSON.parse("{name:'Alex'}");

Why it breaks: JSON requires double quotes around keys and string values.

Corrected approach:

JSON.parse('{"name":"Alex"}');

Mistake 3: Parsing response.json() output again

What the reader might do:

const data = await response.json();
JSON.parse(data);

Why it breaks: response.json() already returns a JavaScript object.

Corrected approach:

Use the returned object directly.

Troubleshooting

If parsing throws an error, validate the quote syntax.

If the result is already an object, remove JSON.parse().

If local storage returns null, check whether the key exists first.

If the payload source is unreliable, wrap parsing in try...catch.

Quick recap

• Use JSON.parse() on JSON strings
• It returns objects or arrays
• JSON requires double quotes
• Do not parse already parsed objects
• Use try...catch for unsafe input