how to fix [Object: null prototype] { title: 'product' }

Question

I've started learning node.js with express framework , when I post a form like this :

router.get('/add-product',(req,res,next)=>{
    res.send('<form action="/product" method="POST" ><input type="text" name="title" /><button type="submit">Submit</button></form>');
});
     
router.post('/product',(req,res,next)=>{
    console.log(req.body);
    res.redirect('/');
});

When I do console.log(req.body) it displays:

[Object: null prototype] { title: 'product' }

instead of just { title: 'product' }

I'm wondering if this actually is an error with express or just a propriety that its been added to express recently , because I downloaded another project created last year and it used the same approach, when I did console.log(req.body), it displayed the same output.

Answer 1

That’s actually good design. Objects by default inherit the Object.prototype that contains some helper functions (.toString(), .valueOf()). Now if you use req.body and you pass no parameters to the HTTP request, then you'd expect req.body to be empty. If it were just "a regular object", it wouldn't be entirely empty:

console.info(({ "toString": 5 })['toString']);   // 5
console.info(({})['toString']);                  // [Function: toString]

There is a way to create "empty objects", meaning objects without any properties / prototype, and that is Object.create(null). You are seeing one of those objects in the console.

So no, this is not a bug that needs to be fixed, that’s just great use of JS' features.

Answer 2

Try this,

const obj = JSON.parse(JSON.stringify(req.body)); // req.body = [Object: null prototype] { title: 'product' }

console.log(obj); // { title: 'product' }

Happy Coding..!