Dev.to WebDev 🛠 Dev 👁 0 📖 2 min read

Unexpected token in JSON: the 7 most common causes and how to fix them

You call JSON.parse() and get SyntaxError: Unexpected token .... The message looks vague, but the cause is almost always one of a handful of mistakes. Here are the seven I see most, with a fix for each. 1. A tr

You call JSON.parse() and get SyntaxError: Unexpected token .... The message looks vague, but the cause is almost always one of a handful of mistakes. Here are the seven I see most, with a fix for each.

1. A trailing comma

{ "name": "Ana", "age": 30, }

JSON does not allow a comma after the last item. Remove it: { "name": "Ana", "age": 30 }.

2. Single quotes instead of double quotes

{ 'name': 'Ana' }

This is valid JavaScript, but JSON requires double quotes for both keys and strings.

3. Unquoted keys

{ name: "Ana" }

Every key must be a double-quoted string: { "name": "Ana" }.

4. Comments

JSON has no comment syntax. Both // note and /* note */ cause an error, so strip them before parsing.

5. undefined, NaN or Infinity

These are JavaScript values, not JSON values. Use null, or leave the key out. JSON.stringify already drops undefined for you, but hand-written JSON often contains it.

6. You are parsing HTML, not JSON

If you see Unexpected token '<' (or '<' is not valid JSON), the response probably starts with <!DOCTYPE html>. A 404 or 500 error page came back instead of your API data. Check the status code first:

const res = await fetch(url);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();

7. Empty or cut-off input

Unexpected end of JSON input means the text ended too early: an empty string, a truncated download, or a missing closing } or ]. Log the raw text before parsing and check that its length and ending look right.

Find the exact spot

Modern engines tell you the position, e.g. at position 42 or line 3 column 5. Paste your JSON into a formatter to jump straight there. I use the free JSON formatter on Parsekit, which runs entirely in your browser, so nothing is uploaded. For a longer list of error messages and their meanings, see the JSON parse errors guide.

Repair instead of editing by hand

If the JSON came from somewhere messy (a log, a chat tool, a copy-paste), a JSON repair tool can fix trailing commas, quotes and similar issues automatically. Always check the result before you rely on it.

Quick checklist

  • Double quotes everywhere
  • No trailing commas
  • No comments
  • Only true, false, null, numbers, strings, arrays, objects
  • Check res.ok before calling .json()

Which one bites you most often? Tell me in the comments.

📰 Read the original article on Dev.to WebDev

Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.