fetch() POST requests with Express: unexpected end of JSON input Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of fetch() POST requests with Express: unexpected end of JSON input without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I’ve been trying to practice with some HTTP requests, and specifically I want to send a POST request, with data taken from an field, and sent via fetch() to a url on my localhost thats set up with express. From there i want to somehow get the response back and have that be displayed on my HTML doc.

However, I’ve ran into a real head scratcher when it comes to getting response.json() to be anything other than undefined.

here’s my frontend script:

const url = "/result";

const inputField = document.querySelector("#write");
const submitButton = document.querySelector("#submit");
const responseField = document.querySelector("#text-goes-here");

const postText = async () => {
  const text = inputField.value;
  const data = JSON.stringify({ destination: text });

  try {
    const response = await fetch(url, {
      method: "POST",
      body: data,
      headers: {
        "Content-type": "application/json",
      },
    });

    if (response.ok === true) {
      const jsonResponse = await response.json();
      responseField.innerHTML = jsonResponse;
    }
  } catch (error) {
    console.log(error);
  }
};

const displayText = (event) => {
  event.preventDefault();

  while (responseField.firstChild) {
    responseField.removeChild(responseField.firstChild);
  }

  postText();
};

submitButton.addEventListener("click", displayText);

and my server script:

const express = require("express");
const bodyParser = require("body-parser");
const read = require('fs');
const router = express.Router();
const app = express();

const port = 3000;


app.use(express.static(__dirname + "/public"));

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());


app.get("/", (req, res) => {
    res.sendFile("public/index.html");
})

router.post("/result", (req, res) => {
    console.log(req.body);
    res.send();
});

app.use("/", router);

app.listen(port, () => {
    console.log(`Server running at port: ${port}`)
});

I did some digging in the dev console and found that (response.ok) is in fact “true”, yet it errors out into the catch statement saying “SyntaxError: Unexpected end of JSON input at postText (script.js:23)”

which is this line exactly:

const jsonResponse = await response.json();

can anyone shed any light on what i’m doing wrong here? I’m at a loss at this point

Answer

This error means that you’re trying to parse something that is not a valid JSON object.

"SyntaxError: Unexpected end of JSON input at postText (script.js:23)"

Which is true, because the response you’re sending back to the frontend is not a JSON.

router.post("/result", (req, res) => {
    console.log(req.body);
    // The response is not a valid JSON object
    res.send();
});

You can change res.send() to res.json() and give it a valid object.

res.json({ name:"John", age:30, car:null })
We are here to answer your question about fetch() POST requests with Express: unexpected end of JSON input - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji