React Js Uncaught in promise SyntaxError Unexpected token in JSON at position 0

Question

I want to fetch my Json file in react js  for this I am using fetch  But it shows an error   Uncaught  in promise  SyntaxError  Unexpected token  lt  in JSON at position 0  What could be the error  i am getting no clue  I even validated my JSON   handleGetJson      console log  inside handleGetJson      fetch    fr json        then  response    gt  response json         then  messages    gt   console log  messages           My Json  fr json        greeting1     fr choose an emoticon      addPhoto1     fr add photo      close1     fr close

User · Answer

I was getting the same error  for me  it was because API was just returning a string however in fetch call I was expecting json    response   gt  response json     Returning json from API resolved the issue for me  if your API is not supposed to return json then simply don t do response json

User · Answer

I had the same issue although I was requesting data from another web server and not locally  The response status code was 200 but I still didnt get the data  even though it was sent in JSON format by default  The  simple  problem was that I had forgot to include  https     in the url  so instead it used the local host in the beginning

User · Answer

Add two headers Content-Type and Accept to be equal to application json   handleGetJson      console log  inside handleGetJson      fetch    fr json           headers               Content-Type    application json            Accept    application json                        then  response    gt  response json         then  messages    gt   console log  messages

User · Answer

The solution that worked for me is that - I moved my data json file from src to public directory  Then used fetch API to fetch the file   fetch    data json   then response   gt              console log response             return response json               then data   gt                 Work with JSON data here           console log data              catch err   gt                 Do something for an error here           console log  Error Reading data     err                 The problem was that after compiling react app the fetch request looks for the file at URL  http   localhost 3000 data json  which is actually the public directory of my react app  But unfortunately while compiling react app data json file is not moved from src to public directory  So we have to explicitly move data json file from src to public directory

User · Answer

I also had the same issue when trying to fetch the data from  quot  src quot  folder  Moving the file into the  quot  public quot  solved the problem from

User · Answer

I confirm some methods proposed here that also worked for me   you have to put your local  json file in your public directory where fetch   is looking for  looking in http   localhost 3000   for example   I use this fetch   in my src App js file  componentDidMount      fetch    data json-data json      then   resp1   gt  resp1 json        then   users1   gt  this setState   cards   users1         so I created public data json-data json and everything was fine then

User · Answer

I had the same issue with fetch and decided to switch to axios  Fixed the issue right away  here s the code snippet  var axios   require  axios       var config         method   get       url   http   localhost 4000             axios config     then function  response        console log JSON stringify response data            catch function  error        console log error

User · Answer

I was getting the error  I simply added  quot proxy quot  in my package json and the error went away  The error was simply there because the API request was getting made at the same port as the react app was running  You need to provide the proxy so that the API call is made to the port where your backend server is running

User · Answer

on your Promise response you requested   response json      but this works well if your server sends json response in return especially if you re using Node Js on the server side  So check again and make sure your server sends json as response as said if its NodeJS the response could be  res json YOUR-DATA-RESPONSE

User · Answer

This error can be received but be aware it can be a red herring to the real issue  In my case  there wasn t an issue with the JSON as the error states  but rather a 404 was occurring that it could not pull the JSON data to process in the 1st place thus resulting in this error    The fix for this was that in order to use fetch on a  json file in a local project  the  json file must be accessible  This can be done by placing it in a folder such as the public folder in the root of the project  Once I moved the json file into that folder  the 404 turned into a 200  and the Unexpected token  lt  in JSON at position 0 error was resolved

User · Answer

Sometime you API backend could not respect the contract  and send plain text  ie  Proxy error  Could not proxy request      or  lt html gt  lt body gt NOT FOUND lt  body gt  lt  html gt    In this case  you will need to handle both cases  1  a valid json response error  or 2  text payload as fallback  when response payload is not a valid json   I would suggest this to handle both cases       parse response as json  or else as txt   static consumeResponseBodyAs response  jsonConsumer  txtConsumer         async      gt          var responseString   await response text          try          if  responseString  amp  amp  typeof responseString      quot string quot             var responseParsed   JSON parse responseString            if  Api debug                console log  quot RESPONSE Json  quot   responseParsed                       return jsonConsumer responseParsed                     catch error               text is not a valid json so we will consume as text               if  Api debug            console log  quot RESPONSE Txt  quot   responseString                 return txtConsumer responseString                  then it become more easy to tune the rest handler  class Api     static debug   true     static contribute entryToAdd        return new Promise  resolve  reject    gt          fetch   api contributions             method   POST             headers     Accept    application json    Content-Type    application json               body  JSON stringify entryToAdd            catch reject          then response   gt  Api consumeResponseBodyAs response             json    gt                if   response ok                     valid json  reject will use error details or error message or http status               reject  json  amp  amp  json details      json  amp  amp  json message     response status                 else                 resolve json                                         txt    gt  reject txt    not json  reject with text payload

User · Answer

Mostly this is caused with an issue in your React Client app  Adding this line to your client package json solves it      proxy    http   localhost 5000     Note  Replace 5000  with the port number where your server is running  Reference  How to get create-react-app to work with a Node js back-end API

User · Answer

It may come when the API you are consuming  is not sending the corresponding JSON  You may experience the response as 404 page or something like HTML XML response

[javascript] React Js: Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

Examples related to javascript

Examples related to json

Examples related to ajax

Examples related to reactjs