从表单输入创建多维关联数组

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