Create multidimensional associative array from form inputs

Question

What would be the best way to create a multidimensional associative array from form inputs?

The form looks like this:

<div id="items">
    <h4>Engraving Text</h4>
    <div class="item" data-position="1">
        <h4 id="engraving-item">Item 1</h4>
        <label>Engraving Line 1: </label>
        <input type="text" class="engraving-input engraving-line1" name="trophy" id="item1-line1">
        <br />
        <label>Engraving Line 2: </label>
        <input type="text" class="engraving-input engraving-line2" name="trophy" id="item1-line2">
        <br />
        <label>Engraving Line 3: </label>
        <input type="text" class="engraving-input engraving-line3" name="trophy" id="item1-line3">
        <br />
    </div>
</div>

If the user enters that they want multiple items - additional inputs are dynamically added to the form using these first 3 as a template.

I'm looking to create this sort of array (for example if the user added 2 items):

var myArray =   {
            item1 :
                [
                    {
                        engraving-line1 : "user entered data",
                        engraving-line2 : "more user data",
                        engraving-line3 : "yep, more data"
                    }
                ],
            item2 :
                [
                    {
                        engraving-line1 : "user entered data",
                        engraving-line2 : "more user data",
                        engraving-line3 : "yep, more data"
                    }
                ]
          };

I had written this but I think I am headed in the wrong direction with it or at the very least - writing it poorly.

var totalItems = $("#quantity_wanted").val();

jsonObj = [];

i=1;

while (i < totalItems){
items = {};
$('.item[data-position="'+i+'"] :input').each(function(){
    var name = $(this).attr("name");
    var engraving = $(this).val();
    item = {}
    item ["name"] = name;
    item ["engraving"] = engraving;
    items.push(item);       
});

jsonObj.push(items) 
i++;    
}

Just looking for help writing the javascript that will help me to iterate through the inputs on the screen and push them into a multidimentional associative array like the one I listed.

Answer 1

Your code could be much simplified.

1. data-position attribute in jquery selector doesn't make sense since you don't actually use its value. You just need to select all input group containers by their shared class (.item), then, for each container, select all descendant inputs.
2. Your code building item element is redundant. You can use inline object literal/initializer ({...}) instead.

Furthermore, as @Andy noted, items array should be initialized by array literal ([]), not object ({}).

So the code should look like this:

var jsonObj = [];
$('div.item').each(function(){
    var items = [];
    $(this).find('input').each(function() {
        items.push({
            name: $(this).attr("name"), engraving: $(this).val()
        });       
    });
    jsonObj.push(items) 
});