Создание многомерного ассоциативного массива из входов формы

Question

Каким будет лучший способ создания многомерного ассоциативного массива из входных данных формы?

форма выглядит следующим образом:

<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> 

Если пользователь вводит, что они хотят несколько элементов - дополнительные входы динамически добавляются к форме, используя эти первые 3 в качестве шаблона.

Я ищу для создания такого рода массива (например, если пользователь добавил 2 шт):

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" 
        } 
       ] 
      }; 

Я написал это, но я думаю, что я движется в неправильном направлении с ним или по крайней мере, плохо написав.

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

Просто нужна помощь написания JavaScript, который поможет мне перебирать входов на экране и нажать их в многомерном ассоциативный массив, как один я перечислил.

Answer 1

Ваш код может быть значительно упрощен.

1. data-position атрибут в селекторе Jquery не имеет смысла , так как вы на самом деле не использовать его значение. Вам просто нужно выбрать все контейнеры группы ввода по их общему классу (.item), а затем для каждого контейнера выберите все входы потомков.
2. Ваш код здания item элемент является избыточным. Вы можете использовать inline объект literal/initializer ({...}).

Кроме того, как отмечено @Andy, items массив должен быть инициализирован массив буквального ([]), а не объект ({}).

Так что код должен выглядеть следующим образом:

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