[Fixed] fetch() POST requests with Express: unexpected end of JSON input


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) {

const displayText = (event) => {

  while (responseField.firstChild) {


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.get("/", (req, res) => {

router.post("/result", (req, res) => {

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


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) => {
    // The response is not a valid JSON object

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

res.json({ name:"John", age:30, car:null })

Leave a Reply

(*) Required, Your email will not be published