“SyntaxError: unexpected end of JSON input” fix

by

Ugh. You ran your code, waited with hope, and then… *boom*! A wild error appeared! One of the most annoying ones: SyntaxError: unexpected end of JSON input. Don’t worry. You’re not cursed. This error is super common, and the good news is — it’s also pretty easy to fix!

Let’s break it down and solve it together. We’ll keep it simple. We’ll keep it fun. And by the end, you’ll be a JSON ninja.

Contents

What is JSON anyway?

JSON stands for JavaScript Object Notation. It’s like a tiny suitcase to pack data and send it around the world. Websites and APIs love JSON. Why? Because it’s lightweight, easy to read, and plays nicely with JavaScript.

Here’s a simple example of a JSON string:

{
  "name": "Pixel",
  "type": "dog",
  "age": 3
}

The computer reads this string and turns it into a real object using JSON.parse(str). It’s like unpacking our suitcase.

So… what does the error mean?

Here’s the full error you probably saw:

SyntaxError: unexpected end of JSON input

This is just the program shouting, “I tried to open the suitcase, but there was nothing inside!”

This happens when JSON.parse() gets an empty string or an incomplete JSON string.

Let’s look at some common causes

Here are the usual suspects behind the error:

  • Empty response from a server
  • Malformed or broken JSON
  • Parsing before data is fully loaded

Okay, let’s fix it!

There are several ways to avoid or fix this error. Let’s take them one by one.

1. Check if the data is not empty

Before you parse, make sure there’s actually something to parse. It’s like checking if the box has something before opening it.

const response = await fetch('/api/data');
const text = await response.text();

if (text) {
  const data = JSON.parse(text);
  console.log(data);
} else {
  console.log('No data received.');
}

This simple check saves you from parsing empty strings.

2. Use try…catch for safety

Sometimes your fetch works, but weird data sneaks in. Wrapping your parsing code in a try...catch keeps your app from crashing.

try {
  const res = await fetch('/api/user');
  const json = await res.json();
  console.log(json);
} catch (e) {
  console.error('Failed to parse JSON:', e);
}

This way, if there is a problem, you’ll see the exact reason and handle it without the app going kaboom.

3. Look at the network response

Sometimes it’s not your code. It’s the server. Maybe the API returned HTML by mistake. Or threw an error. Either way, your JSON parser gets confused.

Use your browser’s dev tools (Network tab) to check if the server is really sending valid JSON.

Look at the response. Does it start with a {? Or is it just plain text like “Oops, something went wrong”? That’s your clue.

4. Wait for the data to arrive

If you’re trying to parse data before it arrives, it’s like opening a cake box before the cake is inside. You’ll just get air.

Make sure you only parse JSON after the fetch finishes:

fetch('/api/items')
  .then(res => res.json()) // Don't call .json() too early!
  .then(data => {
    console.log('Got data:', data);
  })
  .catch(err => {
    console.error('Oops!', err);
  });

Sometimes using async/await makes things easier to follow.

5. Double-check your JSON file

If you’re loading a local JSON file, make sure it’s valid. Even a missing comma or quote can break it.

Here’s a mistake:

{
  "name": "Taco",
  "age": 5 // ← forgot the last comma!!!
  "likes": "chicken"
}

And here’s the corrected version:

{
  "name": "Taco",
  "age": 5,
  "likes": "chicken"
}

You can use an online tool like JSONLint to validate your file.

Pro tip: Replace .json() with .text() when debugging

Still not sure what’s going wrong? Replace response.json() with response.text() and log it:

fetch('/api/test')
  .then(res => res.text())
  .then(text => {
    console.log('Raw response:', text);
  });

This way you can see the raw data before trying to parse it.

Common mistakes to avoid

  • Parsing null or empty responses
  • Parsing before the fetch is done
  • Assuming all servers always return JSON
  • Trusting third-party APIs too much (😅)

Quick checklist to remember

  • Check if the input is empty
  • Wrap your JSON parse in try…catch
  • Log the raw response with .text()
  • Use dev tools to inspect API responses

Helpful example: working fetch code

async function getData() {
  try {
    const res = await fetch('/api/hello');

    const text = await res.text();

    if (!text) {
      console.warn('Empty response!');
      return;
    }

    const data = JSON.parse(text);
    console.log('Parsed data:', data);

  } catch (err) {
    console.error('Something went wrong:', err);
  }
}

Let’s celebrate 🎉

That’s it, you made it! You now know how to fix the pesky unexpected end of JSON input error. It’s all about knowing when and what to parse. Once you practice a bit, it becomes second nature.

Next time you see this error, just smile and say:

“I got this.”

Happy coding!