Fetch request error while I can see the good result in the browser dev tool

Question

I need to fetch JSON data from a localhost server using JS.

The fetch request throws an error:

Uncaught (in promise) SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data

It looks like the answer is empty, but when I open the browser dev tool I can see the JSON data in the network section.

fetch(url, init)
 .then(res => res.json()) //return the error

fetch(url, init)
 .then(res => res.text()) //return an empty string

The result I can see in the network section is well formatted and when I copy/paste it to manually use JSON.parse() I get the right result.

See if there are CORS errors in the console - if not show an example of the JSON and — mplungjan, Oct 04 '21 at 10:59
I guess there are some hidden warnings in the backends output. Take a look at the raw message you receive and you will find the problem — Thallius, Oct 04 '21 at 11:05
Most likely your backend does not returning a valid JSON. Sometimes this happens if your url is not correct and backend or proxy returns a default not found html page. Try to inspect the request in developers tools in browser to see what response you are getting. — metodribic, Oct 09 '21 at 12:26

score 0 · Accepted Answer · answered Oct 04 '21 at 11:11

0

You have to return the promise and than wait:

const method = async() =>{
    return fetch(url, init)
     .then(res => res.json())
     .catch(err)=>{
       //manage error here
    }
}

than you do :

method().then(res=>....)

answered Oct 04 '21 at 11:11

Singh

Thx, check my answer I probably didn't put it in the right place sorry – nem0z Oct 04 '21 at 11:37

1 Answers1