Could someone please help me, i keep getting an error. “ERROR: SyntaxError: Unexpected token < in JSON at position 0” .Can someone please help me.
Hey @Director119, Welcome to Glitch Forums.
Can you post the content of entire json
?
Welcome to the Glitch forums @Director119!
What it Means
On a general level, this error occurs when a JSON object is parsed that has syntax errors in it. Think of something like this, where the message
property contains unescaped double quotes.
{
"success":false,
"data": [{
"code": "Oops",
"message": "This message has "unescaped" quotes."
}]
}
Most Common Cause
In my experience, the most common cause of this is when an HTTP API is retrieved by the browser with a Content-Type: application/json; charset=UTF-8
header set that contains Invalid JSON in the response body.
If the server-side throws an error that breaks a JSON object you’ll see this. A good example of this would be an API response containing a PHP Warning or Notice in the response body when the Content-Type: application/json; charset=UTF-8
header is set.
Here’s an example:
<b>Notice</b>: Undefined variable: the_post in <b>/path/to/some-api-controller.php</b> on line <b>121</b><br />
{
"success":false,
"data": [{
"code": "SUCCESS",
"message": "Funky funky API content for you to work with."
}]
}
In this example (with dummy content) PHP is printing the Notice in my localhost WordPress environment. If you’re seeing this issue in a production environment then you may have a Warning not a Notice.
Other Causes
There are potential solutions available on StackOverflow, but I found that in my case 90% of the time it’s caused by the common scenario described above. If you’re experiencing it and it’s not caused by a broken JSON API response then I’d suggest taking the following steps to track it down:
- Find any JSON objects that could be the cause and run them through JSONLint to check for syntax errors
- …
The fix
The v8 JSON parser, used in Node.js and in the Chrome browser’s javascript implementations, is not forgiving, especially when compared to the more verbose Firefox parser. You may encounter errors like the following when the input JSON string is malformed:
SyntaxError: Unexpected string in JSON at position 1886
JSON is stricter than JavaScript, which considers the following as mistakes:
- Single quotes are not allowed.
- Property names must be quoted.
- Trailing commas are not allowed.
Assuming you have control over the JSON, here are a few approaches you can take to fixing this issue:
Use JSON linter:
Using a linter like eslint-plugin-json in your build process can help catch syntax mistakes before you see them in running code. Microsoft’s VSCode editor has pretty good JSON editing support built-in as well.
Fix the JSON manually
The position in the error message indicates which byte within the file the error occurs around. Vim has a handy command to go to a particular byte offset: :goto
. Open the problematic JSON file in vim and the following will bring you there:
:goto 1886
Look out for Unexpected token < in JSON at position 0
Unexpected token < in JSON at position 0
is likely one of the most common JSON parsing problems in the browser, particularly when consuming data from a server. In this case, check that your server is actually returning a 200 payload. In many cases, you may actually be hitting something like a 404 page, potentially an HTML document instead of JSON, rendering the response unparseable:
> JSON.parse("<html><head><title>404 Not Found</title></head></html>");
Uncaught SyntaxError: Unexpected token < in JSON at position 0
Don’t write JSON yourself in the first place
Outside of simple configuration files, you should avoid serializing JSON yourself. Use Javascript’s built-in JSON.stringify() function, or libraries in other languages, to create JSON strings from real objects.
If you want to generate “pretty” JSON, take note of the third parameter to JSON.stringify
, which specifies the indentation level in spaces, a very useful tool for debugging JSON content:
> const obj = {a:1,b:[2,3]}
> JSON.stringify(obj);
"{"a":1,"b":[2,3]}"
> JSON.stringify(obj, null, 2);
"{
"a": 1,
"b": [
2,
3
]
}"
Note that we leave the second parameter, a replacer function that can be used to blacklist keys from serialization, as null
Happy Glitching and hope this helps!