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)
}
})
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)
});
}