HTML Form: POST an array of objects

Question

Submitting a class roster. Adding 3 students at once. Each student has first, last, age.

Question: How can we get all of the students in an array of arrays?

students[0] => Array (
  ["first"] => "first name for 0",
  ["last"] => "last name for 0",
  ["age"] => "age for 0"
),
students[1] => Array (
  ["first"] => "first name for 1",
  ["last"] => "last name for 1",
  ["age"] => "age for 1"
), 
...

Details
For one student:

<input type="text" name="first">  
<input type="text" name="last">  
<input type="text" name="age">

We can return multiple students in separate arrays like this:

<input type="text" name="students[first][]">  
<input type="text" name="students[last][]">  
<input type="text" name="students[age][]">

which returns an array of firsts, lasts and ages

students["first"] = [array of first names]
students["last"] = [array of last names]
students["age"] = [array of ages]

Theoretically we can get all the info for a student by accessing the same index (say "3" for each array).

We do not want to programatically add an index in the form.
Do not want:

<input type="text" name="students[hardcoded_index][first]">  
<input type="text" name="students[hardcoded_index][last]">  
<input type="text" name="students[hardcoded_index][age]">

If for any reason it matters, we are using Rails for views but can use form helpers or HTML.

messanjah · Accepted Answer · 2016-01-12 20:31:20Z

46

tl;dr: Add empty brackets (`[]`) after `students` to the input names.

Fiddling with Rack::Utils.parse_nested_query it seems you can get the payload you want like this:

<!-- first student -->
<input type="text" name="students[][first]">
<input type="text" name="students[][last]">
<input type="text" name="students[][age]">

<!-- second student -->
<input type="text" name="students[][first]">
<input type="text" name="students[][last]">
<input type="text" name="students[][age]">

Note the empty brackets ([]) after students. This tells Rack you want the students param to be an array. Subsequent params encountered (with the same name) will start a new element.

POST /myroute?students[][first]=foo&students[][last]=bar&students[][age]=21&students[][first]=baz&students[][last]=qux&students[][age]=19

Gets parsed like this:

{"students" => [
  {
    "first" => "foo",
     "last" => "bar",
      "age" => "21"
  },
  {
    "first" => "baz",
     "last" => "qux",
      "age" => "19"
  }
]}

Further reading: http://codefol.io/posts/How-Does-Rack-Parse-Query-Params-With-parse-nested-query

answered Jan 12, 2016 at 20:31

messanjah

9,3084 gold badges30 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

messanjah Over a year ago

I don't know what Flask is, but probably not. This answer is specific to Ruby on Rails.

Rakib Over a year ago

I am using Rails4. This approach made the HTTP POST request correctly with all the students info (as i confirmed from the chrome network inspector). But inside the controller.create method (using binding.pry), when i see params it shows an array of the students but contains ONLY one hash in it - only the last student's hash - the previous students are missing inside the params. What am i doing wrong here?

madannes Over a year ago

For those using Django & DRF, the format required is students[0]first (no dot, unique, specified indexes) as I finally found here: stackoverflow.com/a/57013811/3507333

Immanuel Aug 6 at 5:48

For those using asp.net, this dynamic format doesn't work on asp.net controller binding. so any one from .net community. as of net 9 this isn't supported.

Fahad · Accepted Answer · 2017-12-04 09:46:58Z

25

I know the question is old , but I would like to add my experiences also for future readers.

For those of you who want to process the data in a PHP enviroment , @messanjah's method won't work ,

The methods for parsing data like the built-in serializeArray or serialize are not parsing it as expected either.

This is what I tried so far ...

students[name]
students[][name] - Very Strange since it was meant to automatically index the array
students[name][]

Neither of them worked, but this students[<hardcoded-index>][name] worked for PHP ,

I know that although the question is against this method , but it will be useful for PHP users who will land here in the nearby future as the asker needed it for Ruby On Rails.

The method you choose to hard code the indexes is upto you , you can use a cleaner method by using javascript or you can manually hard code them initially in your form element.

Cheers

edited Dec 4, 2017 at 9:46

answered Nov 1, 2017 at 8:40

Fahad

2,06324 silver badges28 bronze badges

3 Comments

stevec Over a year ago

This is very interesting. Does this imply the difficulty surrounding this particular task is not a rails specific thing, but a HTML thing?

Fahad Over a year ago

Exactly! - but I believe the problem is already solved by now or at least a workaround is available more prettier than this one :D

stevec Over a year ago

i hope so, it’s a little confusing for me, but still a great help. If you know I’d any newer techniques please share the link

Collectives™ on Stack Overflow

HTML Form: POST an array of objects

2 Answers 2

tl;dr: Add empty brackets (`[]`) after `students` to the input names.

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

tl;dr: Add empty brackets ([]) after students to the input names.

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

tl;dr: Add empty brackets (`[]`) after `students` to the input names.