Fix lỗi unexpected token f in json at position 192 năm 2024

If you are coding in JavaScript, React, or any other JavaScript library/framework, you would have come across the following errors:

SyntaxError: Unexpected token < in JSON at position 0

SyntaxError: Unexpected end of JSON input

When does this error occur?

This error occurs when you are trying to parse a string to JSON and the string is not parsable. In other words, it happens when you pass an invalid JSON string to JSON.parse() function.

Try executing the following code in the browser console:

JSON.parse("")

Enter fullscreen mode Exit fullscreen mode

You will see the following error:

So the error is telling that it is seeing a string < at the beginning since a valid JSON should start with {.

Now if you execute the following code, you will get the second error:

JSON.parse('{"html')

Enter fullscreen mode Exit fullscreen mode

If you observe the JSON string, it starts as a valid JSON, however, the JSON is not complete. Hence it is telling 'unexpected end of JSON input'.

Let's now see how we can reproduce same issue in React application:

import { useEffect } from "react"
function App() {
  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch("https://jsonplaceholder.typicode.com/")
      const data = await response.json()
      console.log({ data })
    }
    fetchData()
  }, [])
  return 
home
}
export default App

Enter fullscreen mode Exit fullscreen mode

The above code attempts to fetch the data from https://jsonplaceholder.typicode.com/ and calls response.json(). When we call response.json(), it internally calls

JSON.parse('{"html')

0 to convert the response into a JSON Object.

However, the URL we have passed is of an HTML page and we will be getting an HTML string as the response. Hence, if you execute the above code, it will throw the error: SyntaxError: Unexpected token < in JSON at position 0.

How to fix this issue?

We can fix this issue by making sure that we are calling the right endpoint and we are getting a valid JSON response.

We can do so by opening the URL in the browser and checking the

JSON.parse('{"html')

2 response header:

HTML content type

JSON content type

If you check the

JSON.parse('{"html')

2 of an endpoint that returns a valid JSON, like https://jsonplaceholder.typicode.com/posts, you will see the

JSON.parse('{"html')

2 as

JSON.parse('{"html')

5.

You could also validate if a string is a valid JSON or not in tools like JSON Formatter.

Read next

Building a Contact Form with HTML, CSS, and JavaScript

Manthan Ankolekar - Feb 2

All the metatags you might need for SEO in one React component.

Caleb O. - Jan 23

React: It's Not Rocket Science.

Prakhar Tandon - Feb 1

How are METHODs used in primitive types in JavaScript?

Akshay Kant - Jan 23

Once unpublished, all posts by collegewap will become hidden and only accessible to themselves.

If collegewap is not suspended, they can still re-publish their posts from their dashboard.

Note:

Once unpublished, this post will become invisible to the public and only accessible to collegewap.

They can still re-publish the post if they are not suspended.

Thanks for keeping DEV Community safe. Here is what you can do to flag collegewap:

Make all posts by collegewap less visible

collegewap consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy.