Table of Contents
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:
1JSON.parse("<html>")
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:
1JSON.parse('{"html')
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:
1import { useEffect } from "react"23function App() {4 useEffect(() => {5 const fetchData = async () => {6 const response = await fetch("https://jsonplaceholder.typicode.com/")7 const data = await response.json()8 console.log({ data })9 }1011 fetchData()12 }, [])13 return <div className="App">home</div>14}1516export default App
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() 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 content-type response header:
HTML content type
JSON content type
If you check the content-type of an endpoint that returns a valid JSON, like https://jsonplaceholder.typicode.com/posts,
you will see the content-type as application/json.
You could also validate if a string is a valid JSON or not in tools like JSON Formatter.
Do follow me on twitter where I post developer insights more often!
Leave a Comment