Fix: 'Unexpected token < in JSON at position 0' in JavaScript: A Complete Beginner’s Guide

March 16, 2026

If you are a web developer or someone customizing a Blogger template, encountering the 'Unexpected token < in JSON at position 0' error can be incredibly frustrating. This specific error usually occurs when your JavaScript code expects to receive a JSON object but receives HTML code instead. Since HTML typically starts with the < character (like in <!DOCTYPE html>), the JSON parser fails immediately.

In this guide, we will walk through the common causes and provide step-by-step solutions to fix this error for good.

Step 1: Inspect the Network Response

The first step in debugging this error is to see exactly what your script is receiving from the server. You can do this using Chrome DevTools.

  • Right-click on your webpage and select Inspect.
  • Navigate to the Network tab.
  • Refresh the page or trigger the action that causes the error.
  • Find the failed request (usually highlighted in red or the most recent Fetch/XHR request).
  • Click on the request and select the Response tab.
  • If you see HTML tags or a 404 Error page instead of JSON data, you have found the culprit.

Step 2: Verify the API Endpoint URL

One of the most common reasons for receiving HTML instead of JSON is a typo in the URL. If the URL is incorrect, the server might return a 404 Not Found HTML page.

  • Double-check the string in your fetch() or XMLHttpRequest function.
  • Ensure you are using https:// if the API requires a secure connection.
  • If you are using relative paths (e.g., /api/data), ensure the path is correct relative to the root of your domain.

Step 3: Check for Server-Side Errors

If your JavaScript is calling a backend script (like PHP, Node.js, or a Blogger API), that script might be crashing. When a server-side script fails, it often outputs PHP warnings or error messages in plain HTML text.

  • Check your server logs for 500 Internal Server Errors.
  • Temporarily disable error reporting in your backend production environment to ensure only clean JSON is outputted.
  • Ensure your backend script sets the correct header: header('Content-Type: application/json');

Step 4: Fix Redirects and Authentication Issues

Sometimes, your request is being redirected to a Login Page. If an API requires a token or a session and it isn't provided, the server might redirect the request to an HTML login page.

  • Check if your API keys are valid and correctly included in the request headers.
  • Look at the Status Code in the Network tab. A 301 or 302 status indicates a redirect, which is likely serving an HTML page instead of the JSON you want.

Step 5: Use a Try...Catch Block for Safer Parsing

To prevent your entire script from breaking when this happens, always wrap your JSON parsing logic in a try...catch block. This allows you to handle the error gracefully.

Example:

fetch('https://api.example.com/data')
.then(response => response.text())
.then(text => {
  try {
    const data = JSON.parse(text);
    console.log(data);
  } catch (err) {
    console.error('Failed to parse JSON. Received:', text);
  }
});

Conclusion

The 'Unexpected token <' error is almost always a sign that your data source is sending HTML instead of JSON. By using the browser's Network tab to inspect the response and verifying your endpoint URLs, you can quickly identify whether the issue is a 404 error, a server-side crash, or an authentication redirect. Implementing error handling in your JavaScript will further ensure your web application remains stable even when the server sends unexpected data.


💡 Pro Tip: Keep your software updated to avoid these issues in the future.

Category: #Website