Несколько полей ввода для JSON

Question

У меня есть форма, которая имеет поля ввода, как показано на рисунке ниже. Каждый раз, когда я нажимаю кнопку «Добавить», добавляется строка, содержащая поля ввода.

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

<div class="row"> 
     <div class="row ifields"> 
       <div class="col-sm-3 form-group"> 
       </div> 
       <div class="col-sm-2 form-group"> 
        <input type="text" class="form-control" name="pname" placeholder="Product Name" /> 
       </div> 
       <div class="col-sm-2 form-group"> 
        <input type="number" min="1" class="form-control text-center" name="pquantity" placeholder="Product Quantity" /> 
       </div> 
       <div class="col-sm-2 form-group"> 
        <select class="form-control text-center" name="qtype"> 
         <option value="g">g</option> 
         <option value="Kg">Kg</option> 
         <option value="ml">ml</option> 
         <option value="L">Lt.</option> 
         <option value="pc">Pc</option> 
        </select> 
       </div> 
       <div class="col-sm-2 form-group"> 
        <input type="text" class="form-control text-center" name="pcost" placeholder="Product Cost" /> 
       </div> 
       <div class="col-sm-1"><button class="btn btn-default add-btn">Add</button></div> 
       </div> 
    </div> 
    <div class="row iclone"></div> 
</div> 

И код Jquery:

$(document).ready(function(){ 
     $('.add-btn').click(function(){ 
      var cl = $('.ifields').first('.row').clone(true); 
      $('.iclone').append(cl); 

     }); 
}); 

Я хочу, чтобы пройти через каждую строку и создать файл в формате JSON. Например:

[{ 
    "product" : "A", 
    "quantity" : "100", 
    "quantitytype" : "g", 
    "cost" : "100" 
}, 
... 
.... 
] 

Как создать этот выход JSON? Пожалуйста, направляйте.

Answer 1

Вы можете использовать map() для создания необходимого массива объектов. Попробуйте это:

var data = $('.row.ifields').map(function() { 
    return { 
     product: $(this).find('[name="pname"]').val(), 
     quantity: $(this).find('[name="pquantity"]').val(), 
     quantityttype: $(this).find('[name="qtype"]').val(), 
     cost: $(this).find('[name="pcost"]').val() 
    }; 
}).get(); 

Вы можете использовать data массив по мере необходимости - по-видимому в $.ajax() вызова.

Working example