DEV Community

Ji Zhang (Jimmy)
Ji Zhang (Jimmy)

Posted on

1

SyntaxError: Unexpected end of JSON input

My front-end javascript code shows SyntaxError: Unexpected end of JSON input by each time running, I can locate the error comes from my fetch function.
In the beginning, I thought it was because my JSON content in the fetch request has some issue, after several guesses, I realized that is because PUT method has no response body.

My problem function as below:

function func(email) {
  fetch(`/emails/${email.id}`, {
         method:'PUT',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({read: true})})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => console.log(err))
}
Enter fullscreen mode Exit fullscreen mode

It is my the first time write a fetch with PUT method, When I try to deal with fetch response, I copy the GET method process, by those "then".
Actually, PUT method has no response body, so the problem comes from the then(response => response.json()).

Then finialy, I changed the code like this, no more error.

function func(email) {
  fetch(`/emails/${email.id}`, {
         method:'PUT',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({read: true})})
  .catch(err => console.log(err))
}
Enter fullscreen mode Exit fullscreen mode

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (3)

Collapse
 
tracygjg profile image
Tracy Gilmore •

Hi Jimmy, I have not tried to reproduce the problem but there are a few things I can see in your code that are questionable.
1) The fetch function expects a maximum of 2 arguments when your code fragments have four. The last three should be within an object (see the options parameter in developer.mozilla.org/en-US/docs/W...)
Also, you function (func) has a parameter of email but I am not sure where email_id comes from. Is id a property of email? If so, what you need is email.id.

Finally, you might want to read: developer.mozilla.org/en-US/docs/W...

Collapse
 
jizhang80 profile image
Ji Zhang (Jimmy) •

Thanks Tracy,
About my code, so sorry and happy to have your notice, I paste my code from my cs50w project, and I changed something, but didn't notice those issue. Now I made them correct enough, I think.
And the document you mentioned is great.

Collapse
 
ryansgi profile image
Ryan B •

Fetch is a great candidate for creating a wrapper. This is a fantastic example of why.

In most scenarios, you can have your appropriate API endpoints respond with a 204 (Success, no content) status.

Then in your Fetch wrapper:
put = async <T>(url: string, body: any): Promise<T|null> => {
/// Decision logic to handle status handling of response body.
}

Cloudinary image

Zoom pan, gen fill, restore, overlay, upscale, crop, resize...

Chain advanced transformations through a set of image and video APIs while optimizing assets by 90%.

Explore

đź‘‹ Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay