Jsontoall tools

Posted on Aug 31

I Bet You’re Making One of These JSON Mistakes

You copy the API response.

You stare at it.

Everything looks normal.

The brackets are there. The quotes are there. The values look correct.

And yet your application throws:

unexpected token } in JSON

Welcome to one of the most annoying parts of working with JSON.

The frustrating thing about JSON errors is that the mistake is often tiny, but the payload is huge.

One missing comma can hide inside 500 lines of perfectly valid-looking data.

One extra quote can break the entire response.

And sometimes the error message points somewhere completely different from where you actually made the mistake.

The 10-second JSON debugging trick

Before you start manually scanning hundreds of lines, do one thing:

Parse the JSON.
For example, in JavaScript:

JSON.parse(jsonString);

If the JSON is valid, you're done.

If it isn't, JavaScript will throw an error.

try {
  const data = JSON.parse(jsonString);
  console.log("JSON is valid");
} catch (error) {
  console.error(error.message);
}

But there's a catch.

The error message isn't always as helpful as you'd expect.

The error might not be where you think

Consider this:

{
  "name": "John",
  "age": 30,
  "skills": [
    "JavaScript",
    "Angular",
    "Python",
  ]
}

Can you spot the problem?

The comma after "Python".

It's easy to miss.

And if this were a 1,000-line API response, manually finding that comma would be painful.

That's exactly where a JSON validator becomes useful.

Paste the payload into a validator and let the parser tell you whether the structure is actually valid.

Try it with your own JSON: jsontoall.tools

Three JSON mistakes I see all the time

1. Trailing commas

Developers coming from JavaScript often make this mistake.

JavaScript:

const user = {
  name: "John",
  age: 30,
};

That's fine.

JSON:

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

Not valid JSON.

Remove the final comma.

2. Single quotes

This looks reasonable:

{
  'name': 'John'
}

But JSON requires double quotes.

Correct:

{
  "name": "John"
}

This is particularly easy to encounter when copying something that was originally a JavaScript object.

3. Comments

You might write:

{
  "name": "John",
  // user's name
  "age": 30
}

It looks harmless.

But standard JSON doesn't support comments.

Remove the comment:

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

If you need comments in a configuration file, you're probably looking for something other than strict JSON.

Here's the bigger problem: JSON gets messy fast

A small JSON object is easy to understand.

A real API response isn't.

Imagine something like:

{
  "data": {
    "users": [
      {
        "id": 101,
        "profile": {
          "name": "John",
          "preferences": {
            "notifications": {
              "email": true,
              "sms": false
            }
          }
        }
      }
    ]
  }
}

Now imagine debugging that when it's returned as one enormous line:

{"data":{"users":[{"id":101,"profile":{"name":"John","preferences":{"notifications":{"email":true,"sms":false}}}}]}}

Technically valid.

Practically terrible to read.

That's why validation and formatting should usually be separate steps.

First: Validate

Make sure the JSON can actually be parsed.

Then: Format

Turn this:

{"name":"John","skills":["Angular","Python"]}

into:

{
  "name": "John",
  "skills": [
    "Angular",
    "Python"
  ]
}

Now the structure is obvious.

JSON debugging doesn't have to be complicated

When a JSON payload breaks, I usually follow this order:

1. Validate it

Is it actually valid JSON?

2. Read the parser error

Look at the reported line and character.

3. Check the previous line

This is important.

If the parser complains about something unexpected, the real mistake is often just before it.

4. Look for the usual suspects

Missing comma
Extra comma
Missing quote
Single quotes
Unclosed {
Unclosed [
Invalid escape characters
Comments

5. Format it

Once valid, make the structure readable.

That's usually faster than staring at the payload and hoping your eyes discover the problem.

One more thing: valid JSON doesn't mean correct data

This is where many developers get confused.

This is perfectly valid JSON:

{
  "age": "thirty"
}

But your application might expect:

{
  "age": 30
}

The first example has valid JSON syntax, but the data doesn't match the expected structure.

That's a different problem.

Think of it this way:

JSON validation → Is the syntax valid?

Schema validation → Does the data have the structure and types I expect?

Those are two different checks.

The easiest way to avoid wasting time

When you get a suspicious JSON payload, don't immediately start editing it.

First, validate the original.

That gives you a clean starting point.

Then fix the syntax.

Then format it.

Then, if necessary, validate the data against the structure your application expects.

It sounds simple, but this workflow can save a surprising amount of debugging time.

Need to check a JSON payload?

You don't need to install anything or create a temporary script.

Open https://jsontoall.tools/, paste your JSON, and use the JSON utilities directly in your browser.

Because sometimes the problem isn't your API.

It's one tiny comma hiding somewhere inside 800 lines of JSON.

DEV Community