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

Question

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?

score 6 · Accepted Answer · edited May 23 '17 at 12:24

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

I was missing the extended part, and the square brackets. That does make sense -- I always thought that attachment[index] was standardized but apparently not! — Phil Barresi, Jun 01 '16 at 12:49
in PHP I use like this: `name="attachment[][uri]"` (without index number in array) and this doesn't work in express! — Ali Sherafat, Jul 04 '17 at 15:45

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

1 Answers1

Linked

Related