POST request empty (body-parser extended: true) - still not working?

Question

I am stumped. I am making a simple fetch() to the backend where I log request body i.e. console.log(req.body.form_data)

Problem: returning {} empty json object.

Attempt: I have installed body-parser i.e

 app.use(express.urlencoded({ extended: true }));
   // body parser - parse json in body.requests
    app.use(bodyParser.json());   // to support JSON-encoded bodies
    app.use(bodyParser.urlencoded({
      extended: true  }));        // to support URL-encoded bodies

What is wrong?

app.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var bodyParser = require('body-parser');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');


app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
// body parser - parse json in body.requests
app.use(bodyParser.json());   // to support JSON-encoded bodies
app.use(bodyParser.urlencoded({
  extended: true              // to support URL-encoded bodies
}));

app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

index.js

var express = require('express');
var router = express.Router();

let users = [];

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

router.post('/', function(req, res, next) {
  if(req.body.form_data) {
    console.log(req.body.form_data)
    // res.json(users);
  }
  console.log(req.body)

  res.render('index', { title: 'TO DO APP' });
});
module.exports = router;

myscript.js

document.getElementById("listForm").addEventListener('submit', function(e) {
    e.preventDefault();

    const fname = document.getElementById("fname").value;
    const list_name = document.getElementById("list-name").value;
    const list_date = document.getElementById("list-date").value;

     var form_data = { 
         fname: fname,
         list_name: list_name,
         list_date: list_date
    };
    console.log(form_data );


    // AJAX fetch()
    fetch('/', {
        method: 'POST',
        headers: new Headers(),
        body: form_data
    }).then(function(response) {
        console.log("response..");
        return response.json();
    }).then(function(user_json) {
        console.log(user_json);
    });
});

index.pug

extends layout

block content
  h1= title
  p First, create your list

  form#listForm(method="POST" action="/")
    input(type='text' id="fname" name='fname' autofocus placeholder="your name")
    input(type='text' id="list-name" name='list-name' autofocus placeholder="name your list")
    input(type='date' id="list-date" name='list-date' autofocus placeholder="today's date") 
    button(type='submit') Create List

Answer 1

I suppose you need to pass the content-type header with your request which you're not sending currently. Also you would need to convert it into a JSON string by using JSON.stringify like below.

let headers = new Headers();
headers.append('content-type','application/json');
fetch('/', {
    method: 'POST',
    headers: headers,
    body: JSON.stringify(form_data)
}).then(function (response) {
    console.log("response..");
    return response.json();
}).then(function (user_json) {
    console.log(user_json);
});