Multidimensional form array to JavaScript object

Question

I am working on a Backbone app that requires the input of rows of data (read: an array of objects).

I have the form set out like so:

<tr>
    <td><input type="text" name="items[][qty]"></td>
    <td><input type="text" name="items[][job_number]"></td>
    <td><input type="text" name="items[][description]"></td>
    <td><input type="text" name="items[][purchase_order]"></td>
</tr>
[...]

with a dynamic number of rows.

I want to be able to retrieve the data in the form of:

{
    items: [
        {
            qty: [val],
            job_number: [val],
            description: [val],
            purchase_order: [val]
        },
        [...]
    ]
}

The closest solution I have found is by Aaron Shafovaloff but it doesn't support the arrays in the output (only objects). I could modify his code to do what I need but I figured I would ask here first since there is no point reinventing the wheel.

I am using jQuery and Underscore in my project so have access to their methods.

Answer 1

Check https://github.com/serbanghita/formToObject

var myFormObj = new formToObject('myFormId');
// console.log(myFormObj);

Answer 2

I have mine this way to get multiple rows of text boxes:

    aItems = new Array();
    $("table tbody tr").each(function(){
        var $this = $(this);

        aItems.push({
            qty:$this.find('input[name="qty"]').val(),
            job_number: $this.find('input[name="job_number"]').val(),
            description:$this.find('input[name="description"]').val(),
            purchase_order:$this.find('input[name="purchase_order"]').val()
        });

    });

how about this:

    aItems = new Array();
    $("table tbody tr").each(function(){
        var items = {};

        $(this).find('input').each(function(){
            items[$(this).attr('name')] = $(this).val();
        }
        aItems.push(items);

    });