node.jspostgresqlexpresspostmithril.js

Returning empty object from POST request (mithril w/ Node and Express)


Currently having an issue where a object with null values for all content except ID is returned when trying to complete a POST request from my front end. I'm also not receiving any error messages in the console. I've tested my server using Insomnia and everything works as expected with my POST. I've also tried taking the body of newEntry out of curly brackets and including headers (even though Mithril's documentation doesn't show using them).

FrontEnd




const setData = formDOM => {

  const formData = new FormData(formDOM);
  console.log("formData", formData)
  const newEntry = {};

  Array.from(formData.entries()).map(entryValue => {
    const key = entryValue[0];
    const value = entryValue[1];

    switch (value) {
      case "false":
        newEntry[key] = false;
        break;
      case "true":
        newEntry[key] = true;
        break;
      default:
        newEntry[key] = value;
        break;
    }
  });

  console.log("new entry", newEntry)

  m.request({
    method: 'POST',
    url: 'http://localhost:5000/santaslist',
    body: {
      newEntry
    }
  }).then((person) => {
    console.log("updated entry", person)
  });
}


const EntryForm = {


  // state
  data: {
    name: "",
    street: "",
    state: "",
    city: "",
    zipcode: "",
    nice: false,
    naughty: false,
    clicked: false,
  },

  // const { name, street, state, city, zipcode, nice, naughty } = data,

  view: (vnode) => (

    <form name="entry-form" id="entry-form">

       ...

      <button
        class="ui-button"
        type="button"
        data-toggle="modal"
        data-target="#exampleModal"
        onclick={() =>
        { setData(vnode.dom)}
        }
      > Add </button>

     ...

    </form >
  ),
};

export default EntryForm;

BackEnd

const app = express()
const cors = require("cors")
const pool = require("./db")
const bodyParser = require("body-parser")

// middleware
app.use(cors())
app.use(express.json())//req.body
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({
    extended: true
  }))
//ROUTES//

//create a list item (POST)
app.post("/santaslist", async(req,res) => {
    console.log(req.body)
    // console.log(req.headers)
    // console.log(res)
    try {
        const { name, street, city, state, zipcode, naughty, nice } = req.body


        const newListItem = await pool.query("INSERT INTO listitems(name, street, city, state, zipcode, naughty, nice) VALUES ($1, $2, $3, $4, $5, $6, $7) RETURNING *",[name, street, city, state, zipcode, naughty, nice])

        res.json(newListItem.rows)
    } catch (err){

        console.error(err.message)
    }
})

"new entry" and "updated entry" console.logs


Solution

  • I was able to figure out, instead of body I used the data option.

    m.request({
        method: 'POST',
        url: 'http://localhost:5000/santaslist',
        // body: newEntry,
        data: newEntry
      }).then((person) => {
    
        // addPersonToList(person)
        console.log("updated entry", person)
    
      });
    }