parsing failed SyntaxError: Unexpected end of input

Question

I am trying to retrieve the response from an API, but after using

fetch("url").then(res=>res.json()),

I am getting unexpected end of input error in my code at the following line:

res => res.json(),

Please find below code and help me locate exactly where am i going wrong:-

static fetchCurrentServices(){      
   return   fetch("http://localhost:8080/portal-backend/services",   {
        mode: "no-cors",
        method: "GET" ,
        headers: {
          "Access-Control-Allow-Origin": "*",
          "Content-Type": "application/json"
        } 
  })
  .then(
    res => res.json() 
  ).catch(function (ex) {
   console.log('parsing failed', ex)
    });
  }

The problem probably is in the response you're getting, which is not json or it's malformed json. You probably forgot to replace "localhost:port" in your url with something that makes more sense? — ezakto, Mar 28 '19 at 05:19
no actually i changed the url from original to the above due to privacy concerns , i am able to get proper response (proper json formatted response from the url), problem is still at rendering the response. though the original url is : http://localhost:8080/portal-backend/services — pratyaksh sudan, Mar 28 '19 at 05:33
Can you copy the response you're getting and pass it as a string to `JSON.parse` in your browser console? What does it say? — maazadeeb, Mar 28 '19 at 06:25
just go here [here](https://stackoverflow.com/questions/43317967/handle-response-syntaxerror-unexpected-end-of-input-when-using-mode-no-cors). similar issue with `mode: "no-cors"` — Sahil Raj Thapa, Mar 28 '19 at 06:42
i am able to get the desired response with JSON.parse() in browser console, now trying it with code — pratyaksh sudan, Mar 28 '19 at 06:42
after using JSON.parse(), following is the response {currentServiceList: Array(2), message: "Edit the email id for profile"} currentServiceList: (2) [{…}, {…}] message: "Edit the email id for profile" __proto__: Object — pratyaksh sudan, Mar 28 '19 at 07:08

Bhavani Mandapati · Accepted Answer · 2019-03-28T09:35:48.923

0

Can you try below code i think you missed adding {} and added some more changes please look at it.

static fetchCurrentServices(){      
   return   fetch("http://localhost:8080/portal-backend/services",   {
        mode: "no-cors",
        method: "GET" ,
        headers: {
          "Access-Control-Allow-Origin": "*",
          "Content-Type": "application/json"
        } 
  }).then(res =>{
     return new Promise((resolve) => {
       if (res) {
        res.json().then(json => resolve(json)).catch(() => resolve(null))
      } else {
        resolve(null)
     }
   })

  }).catch(function (ex) {
   console.log('parsing failed', ex)
    });
  }

edited Mar 28 '19 at 09:35

answered Mar 28 '19 at 07:35

Bhavani Mandapati

207
2
11

Thank you, but in my case this is not helpful. I want to know why it does not work? Is my JSON not valid? Why is my response not ok? – pratyaksh sudan Mar 28 '19 at 08:15
In your case if you get response as null then you may face this type of issue so you can make catch for that response is like below I mentioned return new Promise((resolve) => { if (resp) { resp.json().then(json => resolve(json)).catch(() => resolve(null)) } else { resolve(null) } }) By using catch on resp.json() - you might be silently suppressing genuine parsing errors too. So when there is no data or when data has parsing errors - your code always assumes only no data case – Bhavani Mandapati Mar 28 '19 at 09:31
yes, i able to handle the issue with this piece of code, thanks :) but the real issue is that in mode : "no-cors " i am suppressing cross-origin platform sharing between front-end and api , therefore even though api returns response , i get an opaque response and thus empty response. I on the other hand , want to get proper js response and map it on my component – pratyaksh sudan Mar 28 '19 at 11:00
Thanks , i was able to handle this by adding the following annotation on the server side code :- @CrossOrigin(origins="http://localhost:3000") @GetMapping(path="/services", produces=MediaType.APPLICATION_JSON_VALUE) – pratyaksh sudan Mar 29 '19 at 04:26

parsing failed SyntaxError: Unexpected end of input

1 Answers1