Haresh Vidja Haresh Vidja - 2 months ago 9
Node.js Question

Nodejs - Express - Nested Post data not parsing properly

I want to post form with nested post element

View in HTML

<form method="post" action="">
<input type="text" placeholder="Enter Tag here" class="gui-input" name="reply_message">
<input type="text" placeholder="Enter Label for Decision" class="gui-input" name="decision[0][label]" value="Interested">
<input type="text" placeholder="Enter decision keywords here" class="gui-input" data-role="tagsinput" name="decision[0][keyword]" value="Interested, call me">
<input type="text" placeholder="Enter Label for Decision" class="gui-input" name="decision[1][label]" value="Not Interested">
<input type="text" placeholder="Enter decision keywords here" class="gui-input" data-role="tagsinput" name="decision[1][keyword]" value="not interested, not">
<input type="text" placeholder="Enter Label for Decision" class="gui-input" name="decision[2][label]" value="Call Later" >
<input type="text" placeholder="Enter decision keywords here" class="gui-input" data-role="tagsinput" name="decision[2][keyword]" value="Interested, call me, later">
<button class="button btn-primary" type="submit">Submit </button>


Router File

router.post('/mapping', isLoggedIn, function (req, res, next) {
var posted_data= req.body;
console.log(req.body);
res.send(posted_data);
});


I am getting Posted Data structure like this

{
"reply_message": "This is test",
"decision[0][label]": "Interested",
"decision[0][keyword]": "Interested, call me",
"decision[1][label]": "Not Interested",
"decision[1][keyword]": "not interested, not",
"decision[2][label]": "Call Later",
"decision[2][keyword]": "Interested, call me, later"
}


But actual Posted data structure should be

{
"reply_message": "This is test",
"decision": [{
"label": "Interested",
"keyword": "Interested, call me"
}, {
"label": "Not Interested",
"keyword": "not interested, not"
}, {
"label": "Call Later",
"keyword": "Interested, call me, later"
}]
}


So how ca I achieve this, Is there any node module i have to use for posted form data like this?

Answer

Well, name="decision[0][label]" is working correctly. Form Data is submitted as key-value pairs and name of input becomes the key.

If the form was submitted using HTTP GET, you would get desired object in req.query. However for HTTP POST, it comes in req.body as is.

Here, the qs module can help you on server side:

const qs = require('qs');

const input = {
    "reply_message": "This is test",
    "decision[0][label]": "Interested",
    "decision[0][keyword]": "Interested, call me",
    "decision[1][label]": "Not Interested",
    "decision[1][keyword]": "not interested, not",
    "decision[2][label]": "Call Later",
    "decision[2][keyword]": "Interested, call me, later"
};

const output = qs.parse(qs.stringify(input)); 

console.log(output);

// console:
{ reply_message: 'This is test',                                                                                                
  decision:                                                                                                                     
   [ { label: 'Interested', keyword: 'Interested, call me' },                                                                   
     { label: 'Not Interested', keyword: 'not interested, not' },                                                               
     { label: 'Call Later', keyword: 'Interested, call me, later' } ] }