16 min read read
json parse error unexpected token fixjson.parse error javascriptunexpected token < in json at position 0unexpected token o in json at position 1fix json syntax errorjson formatting tipsjavascript debuggingnode.js json errorfetch json error fixjson validator

How to Fix JSON Parse Error Unexpected Token: A Definitive Guide

Imad Uddin

Full Stack Developer

How to Fix JSON Parse Error Unexpected Token: A Definitive Guide

I clearly remember the exact moment I first encountered the dreaded JSON parse error unexpected token fix search query in my own browser history years ago. I was working on a high stakes project for a major client, and a critical feature simply would not load. The console was screaming at me with a cryptic message about an unexpected token at position zero. I felt that sudden pit in my stomach that every developer knows; the code looked perfect, yet it was failing for a reason I could not see. After hours of digging, I discovered that my server was returning a 404 Not Found page as HTML instead of the JSON data I expected.

That night was a turning point in my career. I realized that JSON.parse is one of the most honest functions in JavaScript; it does exactly what it is told, and it has zero tolerance for even the smallest imperfection. In this guide, I am going to share everything I have learned about the JSON parse error unexpected token fix so that you do not have to spend hours frustratingly staring at your screen. We will explore the most common culprits, from sneaky single quotes to invisible characters, and I will give you the exact steps to solve them for good.

What Does an Unexpected Token Error Actually Mean?

At its core, this error is a signal from the JavaScript engine that you are asking it to read something that does not follow the strict rules of JavaScript Object Notation (JSON). When you use the JSON.parse() function, it expects a string that follows a very specific structural map. If it encounters a character where it does not belong, it stops immediately and throws a syntax error.

Think of it like a recipe. If the recipe calls for two eggs and you give the chef a rock, the chef cannot continue. In the world of data, the rock is your unexpected token. Whether it is a comma where none should be, a single quote instead of a double quote, or an entire HTML page being passed as a string, the result is the same: absolute failure.

The Most Common Culprit: Unexpected Token < at Position 0

If you are seeing this specific error, I can almost guarantee with 99 percent certainty that you are trying to parse an HTML document as if it were JSON. This usually happens when you use the fetch() API or an AJAX call to request data from a server.

The Scenario

Imagine you are fetching user data from api/users. Your code looks like this:

JavaScript
fetch('/api/users')
  .then(response => response.json())
  .then(data => console.log(data));

However, the server is down or the path is wrong. Instead of data, the server sends back a standard 404 page which starts with <!DOCTYPE html>.

The Fix

The very first character of that HTML page is the < symbol. Since JSON cannot start with that character (it must start with a bracket or an open brace), the parser throws a fit. To fix this, you must always check the response status before calling the .json() method:

JavaScript
async function safeFetch() {
  const response = await fetch('/api/users');
  
  if (!response.ok) {
    console.error("The server sent an error page instead of data.");
    return;
  }
  
  const data = await response.json();
  console.log(data);
}

By ensuring the response is successful, you prevent your code from even attempting to parse non JSON content.

The Second Most Common Issue: Single Quotes vs. Double Quotes

This is a mistake I see a lot of developers make when they are manually creating JSON strings or migrating data from a JavaScript object.

The Scenario

In standard JavaScript, single quotes and double quotes are mostly interchangeable. You can write 'name' or "name" and the code will work perfectly. However, the JSON standard is incredibly strict. Keys and string values must be enclosed in double quotes.

If you try to parse this:

JavaScript
const badJson = "{ 'name': 'Imad' }";
JSON.parse(badJson); // Error!

You will get an unexpected token error pointing to the single quote at position two.

The Fix

Always ensure your strings use double quotes. If you are generating a string from a JavaScript object, always use the JSON.stringify() method instead of trying to concatenate strings manually.

JavaScript
const validObject = { name: "Imad" };
const safeString = JSON.stringify(validObject);
console.log(JSON.parse(safeString)); // Works perfectly!

If you have a large file full of single quotes, you can use our JSON Flattener or a dedicated formatter tool to clean up the syntax automatically.

Dealing with Trailing Commas

Modern JavaScript has become very forgiving. You can put a comma after the last item in an array or an object, and it will not cause any issues. JSON, however, has not gotten the memo.

The Scenario

Consider this configuration file:

JSON
{
  "theme": "dark",
  "version": "1.0.2",
}

That tiny comma after the version number is a fatal error in the eyes of JSON.parse(). The parser sees the comma and expects another key; when it finds a closing brace instead, it throws an unexpected token error.

The Fix

You must manually remove trailing commas. If you are dealing with thousands of lines, the best way to do this is with a JSON Formatter or a linter like ESLint that can catch these issues as you write. I always recommend using an automated tool for this because it is almost impossible for a human to spot a single extra comma in a 5,000 line file.

The Mystery of Unexpected Token o at Position 1

This is perhaps the most confusing error for beginners because it usually means you are trying to parse something that is already a JavaScript object.

The Scenario

When you see this error, it is because you passed an actual object to JSON.parse(). When an object is converted to a string automatically, it becomes [object Object]. The second character in that string is the letter o.

JavaScript
const myData = { id: 1 };
JSON.parse(myData); // Error: Unexpected token o in JSON at position 1

The Fix

Check your variables! If the data is already an object, you do not need to parse it. You only use JSON.parse() when you are dealing with a raw string (like a response from an API or a line from a file). A simple typeof check can save you a lot of headache here:

JavaScript
if (typeof data === "string") {
  data = JSON.parse(data);
}

Invisible Killers: The BOM and Hidden Characters

Sometimes, the JSON looks absolutely perfect to the naked eye, yet it still fails. This is often due to the Byte Order Mark (BOM) or other invisible whitespace characters.

The BOM Problem

Some text editors (especially on Windows) add an invisible marker at the very beginning of a file to specify the encoding. This is known as a BOM. While it is useful for some applications, JavaScript does not know what to do with it.

The Fix

If you suspect a hidden character is causing issues, you can "sanitize" your string before parsing it by using a regular expression to remove non breaking spaces and other invisible markers:

JavaScript
const sanitizedData = rawData.trim().replace(/^\uFEFF/, "");
const cleanJson = JSON.parse(sanitizedData);

I always include a .trim() call when reading from a file because it is very common for a file to end with an extra empty line or a space that can trip up older browsers.

Environment Specific Insights

Browser Debugging

When debugging in the browser, always use the Network tab in your developer tools. Click on the failed request and look at the Response sub tab. If you see HTML code instead of JSON, you have found your problem. Also, remember that if you are building things like our JSON to Excel Converter, your site might run into CORS issues which can return blocked responses that lead to parsing errors.

Node.js Debugging

On the server side, you often deal with Buffers when reading files. If you forget to specify the encoding, you are passing raw binary data to the parser.

JavaScript
// This will likely fail!
const data = fs.readFileSync('data.json');
JSON.parse(data); 

// This will succeed!
const data = fs.readFileSync('data.json', 'utf8');
JSON.parse(data);

Always ensure you are working with a string before calling the parse function.

How to Handle Exceptionally Large JSON Files

If you are working with a file that is several hundred megabytes or even gigabytes in size, the standard JSON.parse() approach is risky. It can consume so much memory that your application crashes with an out of memory error.

For these cases, I highly recommend using a "stream" approach. Streaming allows you to parse the file piece by piece without loading the entire thing into your RAM at once. You can use our JSON File Splitter to break large files into manageable chunks, or use a library like stream json in Node.js to handle the processing efficiently.

Comparison Table: Common Unexpected Tokens and Their Meanings

Unexpected TokenWhat it Usually MeansHow to Fix It
<You are parsing an HTML error page.Check the API URL and response status.
oYou are parsing a JavaScript object.Stop parsing! The data is already an object.
uYou are parsing the word "undefined".Verify your API is actually returning data.
'You used single quotes instead of double.Standardize your JSON to use double quotes.
[You expected an object but got an array.Access the data via index zero first.
**There is an unescaped backslash in the string.Double escape your backslashes in the source.

Pro Tips for Error Prevention

Throughout my decade of development, I have found that the best way to fix errors is to prevent them from happening in the first place. Here are my three "Golden Rules" for JSON safety:

  1. Use Schema Validation: Tools like Zod or Joi allow you to define exactly what your data should look like. This catches issues before they reach your logic.
  2. Always Log the Raw String: When a parse error occurs, the very first line of your catch block should be a log of the raw string. Seeing exactly what was passed to the function is 90 percent of the battle.
  3. Automate Your Formatting: Never write JSON manually if you can avoid it. Use tools like our YAML to JSON Converter or JSON to JSONL to ensure your data structures are perfectly formatted by machine logic instead of human fingers.

Related Tools and Guides

If you are currently wrestling with data format issues, these resources will make your life much easier:

Final Thoughts

The JSON parse error unexpected token fix is more than just a search query; it is a vital part of a developer's education. Every time you solve one of these errors, you are gaining a deeper understanding of how data is structured and how different parts of the web communicate with each other.

Whether you are fixing a small configuration file or architecting a massive data migration, the principles remain the same: be strict with your types, be cautious with your network responses, and always have a good set of tools at your side.

Remember that every expert was once a beginner staring at a console error in frustration. With a little patience and the techniques we have discussed today, you will be able to handle any JSON error that comes your way with pride and precision.

Happy debugging!

Read More

All Articles