form element array keys in node and express

Question

Despite my best efforts I'm stuck on getting the array keys for form elements submitted to NodeJS and Express and handlebars.

My form elements look like this:

{{#each block}}
<input type='text' name='block_payout[{{id}}]' />
{{/each}

This results in the following markup in the browser:

<input type='text' name='block_payout[14]' />
<input type='text' name='block_payout[15]' />
<input type='text' name='block_payout[16]' />

In PHP this would result in an array as an element of the $_POST array:

$_POST [
  block_payout [
    14 => value1
    15 => value2
    16 => value3
  ]
]

However, the req.body property in Node/Express removes these keys and creates an indexed array:

req.body [
  block_payout [
    0 => value1
    1 => value2
    2 => value3
  ]
]

Since I want to use the key to tie the submitted values to something else this is a big problem for me. Does anyone know how I can get the submitted form data with the correct keys??

Answer 1

It seems like the body parser uses an array (which must start at index 0) when it sees only numeric keys, and an object when there is at least one key that is non-numeric. With that in mind, you could try one of the following methods:

1. Use a hidden form input to force the use of an object over an array. Example:

   <input type='hidden' name='block_payout[null]' />
   <input type='text' name='block_payout[14]' />
   ...
   

   Results in the following body:

   { block_payout: { '14': 'test1', '15': 'test2', '16': 'test3', null: '' } }
   

2. Prefix your keys with a non-numeric character to force the object mapping. Example:

   <input type='text' name='block_payout[i14]' />
   ...
   

   Results in the following body:

   { block_payout: { i14: 'test1', i15: 'test2', i16: 'test3' } }