Phil Barresi Phil Barresi - 6 months ago 15
Node.js Question

In express, is it possible to POST an array of objects without AJAX?

I am trying to submit an array of objects using a regular form, without AJAX, and am finding that instead of the request body being parsed into an array of objects it just has many fields corresponding to the names of the objects.

I know that when submitting an array of primitives, you simply fill many inputs with the same name and it will populate; however, I cannot seem to wrap my head around applying this to complex objects.

My form code is fairly straightforward:

<div class="col-sm-9">
<div class="row">
<div class="col-md-6">
<div class="form">
<div class="form-group">
<label for="attachment[0].name" class="control-label">Name</label>
<input name="attachment[0].name" class="form-control" value="First Name" type="text">
</div>
<div class="form-group">
<label for="attachment[0].uri" class="control-label">URI</label>
<input name="attachment[0].uri" class="form-control" value="First URI" type="text">
</div>
<div class="form-group">
<label for="attachment[0].description" class="control-label">Description</label>
<textarea rows="4" value="First Description" name="attachment[0].description" class="form-control">First Description</textarea>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form">
<div class="form-group">
<label for="attachment[1].name" class="control-label" >Name</label>
<input name="attachment[1].name" class="form-control" value="Second Name" type="text">
</div>
<div class="form-group">
<label for="attachment[1].uri" class="control-label">URI</label>
<input name="attachment[1].uri" class="form-control" value="Second URI" type="text">
</div>
<div class="form-group">
<label for="attachment[1].description" class="control-label">Description</label>
<textarea rows="4" name="attachment[1].description" class="form-control">Second Description</textarea>
</div>
</div>
</div>
</div>


I have made a sample repository demonstrating my issue; https://github.com/xueye/express-form-issue where you can just run
node server.js
, navigate to
http://localhost:3000
and submit the entry; the request body will show up in your console, where it should show up as:

{ name: '',
type: '',
'attachment[0].name': 'First Name',
'attachment[0].uri': 'First URI',
'attachment[0].description': 'First Description',
'attachment[1].name': 'Second Name',
'attachment[1].uri': 'Second URI',
'attachment[1].description': 'Second Description' }


Is it possible to POST data in the way I am attempting to?

Answer

When you make a POST request, with a regular form or with JavaScript, you are sending formatted text to the server.

You can't send an array, but you can send a text representation of an array.

None of the data formats supported by forms come with a standard method to represent an array of data.

A pattern (introduced by PHP) uses square brackets to describe array-like structures.

This is similar to what you are using, except you sometimes use JavaScript style dot-notation. Switch to purely using square-brackets.

name="attachment[1][uri]"

… but you need to decode that data format on the server.

To do that in Express 4 use:

var bodyParser = require("body-parser");
var phpStyleParser = bodyParser.urlencoded({ extended: true })

and

app.post('/example', phpStyleParser, function(req, res) {
    console.log(req.body);
    res.json(req.body);
});