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

AngularJavascriptnode.jsExpress

Angular Problem Overview


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.

Angular Solutions


Solution 1 - Angular

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.

Solution 2 - Angular

Try this,

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

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

Happy Coding..!

Solution 3 - Angular

I get some problem and my terminal showed me below explanation

body-parser deprecated undefined extended: provide extended option at express

and i used this app.use(bodyParser.urlencoded({extended: false}))

or

you are running a version of Express that is 4.16+ then type just

app.use(express.urlencoded({extended: true}))

I think it helps you

To find out more about the extended option, read the docs or someone here has answered it well - What does 'extended' mean in express 4.0?

Solution 4 - Angular

cos the object is based on the Null object. I found the best way to strip this off, eg if you need an exact match for tests is to use:

const groups = {...match.groups} // remove null object for test comparison

Solution 5 - Angular

You can use Object.assign to fix your problem in the following fashion:

const obj = Object.assign({},req.body)

console.log(obj)

It initializes a new object with Object.prototype and assigns all the properties of req.body to it.

Solution 6 - Angular

The below code worked for me

app.use(express.urlencoded({ extended : true }));
app.use(express.json());

Solution 7 - Angular

Just change {extended: false} to {extended: true} it works for newer versions of body-parser. It's working in ^1.19.0 version

Solution 8 - Angular

Another option is to simply iterate through the dictionary/objects's key value pairs:

for (let parameter in req) {
	console.log(parameter, '->', query[parameter]);
}

which is what did the trick for me.

Solution 9 - Angular

I recommmend to use the function JSON.parse like that:

const form = JSON.parse(JSON.stringify(req.body)) console.log(form.title)

Solution 10 - Angular

You can try this:

app.use(express.urlencoded({ extended: false }));

Solution 11 - Angular

I had the same problem. I found out the problem was in my ejs file. I used this:

<form method="POST">

But with ajax i set the method to post so somehow when i submitted the form it sent an empty Object and the values i gave. When i deleted the method from ejs the problem solved.

I hope it helps

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMohamed AarabView Question on Stackoverflow
Solution 1 - AngularJonas WilmsView Answer on Stackoverflow
Solution 2 - AngularTanzeel SaleemView Answer on Stackoverflow
Solution 3 - AngularOnur HangulView Answer on Stackoverflow
Solution 4 - AngulardcsanView Answer on Stackoverflow
Solution 5 - AngularKudosView Answer on Stackoverflow
Solution 6 - AngularYashwanth M YView Answer on Stackoverflow
Solution 7 - AngularAhmed JubayerView Answer on Stackoverflow
Solution 8 - AngularlogankilpatrickView Answer on Stackoverflow
Solution 9 - AngularElton MarquesView Answer on Stackoverflow
Solution 10 - AngularSandeep KumarView Answer on Stackoverflow
Solution 11 - AngularMartin CsomaiView Answer on Stackoverflow