Using Fetch: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

Question

I want to use the new Fetch in javascript to do an ajax request. This is the code I've written for that

// Example POST method implementation:
var initial_data = {
  'id': 1,
  'model-name': 'Joke'
};


postData('/start-jokes', initial_data)
  .then(data => console.log(data)) // JSON from `response.json()` call
  .catch(error => console.error(error))

function postData(url, data) {
  // Default options are marked with *
  return fetch(url, {
    body: JSON.stringify(data), // must match 'Content-Type' header
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, same-origin, *omit
    headers: {
      'user-agent': 'Mozilla/4.0 MDN Example',
      'content-type': 'application/json'
    },
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, cors, *same-origin
    redirect: 'follow', // manual, *follow, error
    referrer: 'no-referrer', // *client, no-referrer
  })
  .then(response => response.json()) // parses response to JSON
}

but it throws an error on load like so

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

Trying it out on the console this is the response also of calling postData

Promise { <state>: "pending" }
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

Can you please show the log of your JSON string received from the server? This is occurring because your JSON string is malformed. — Ullas Hunka
– Ullas Hunka, Commented Jun 16, 2018 at 8:56
Thanks Ullas I assumed it was the code with a bug but it was the backend throwing a 500 error and returning a django error instead of json — Sam B.
– Sam B., Commented Jun 16, 2018 at 9:42

dannyxnda · Accepted Answer · 2021-03-03 14:31:08Z

1

Don't use then(response => response.json() in fetchData like this. If there is an error when you call API, you can't catch that.

// Example POST method implementation:
var initial_data = {
  'id': 1,
  'model-name': 'Joke'
};


postData('/start-jokes', initial_data)
  .then(response => response.json()) // parses response to JSON
  .then(data => console.log(data)) // JSON from `response.json()` call
  .catch(error => console.error(error))

function postData(url, data) {
  // Default options are marked with *
  return fetch(url, {
    body: JSON.stringify(data), // must match 'Content-Type' header
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, same-origin, *omit
    headers: {
      'user-agent': 'Mozilla/4.0 MDN Example',
      'content-type': 'application/json'
    },
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, cors, *same-origin
    redirect: 'follow', // manual, *follow, error
    referrer: 'no-referrer', // *client, no-referrer
  })
}

edited Mar 3, 2021 at 14:31

answered Feb 28, 2021 at 16:50

dannyxnda

1,0421 gold badge11 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

divya sekaran Over a year ago

Then how to get JSON response from fetch.

dannyxnda Over a year ago

postData is just to declare the API call. You should control it outside when you execute.

Collectives™ on Stack Overflow

Using Fetch: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related