Jquery \ JS - 遇到麻煩從輸入字段中創建對象數組

Question

我有兩行，其中每行包含3個input字段。我想創建一個object s的數組，其中每個object有3個屬性（每個輸入字段數據保存在相應的屬性中，我無法弄清楚如何創建這些對象，現在輸出是6個具有1個屬性的對象，而不是2個對象具有三個屬性的每個請告知 的jsfiddle例子是here

HTML：。

<div id="reward-container"><!--rewards container --> 
<div id="div1" class=""> 
    <p class="s7-gift-title"><span class="reward-num"></span>first row</p> 
    <div class="text-left"> 
     <div class="row"> 
      <div class="col-lg-6 col-md-5 col-sm-5"> 
       <div class="form-group form-group-default"> 
        <label class="to-uppercase">label1</label> 
        <input type="text" class="form-control"> 
       </div> 
      </div> 
      <div class="col-lg-3 col-md-4 col-sm-4"> 
       <div class="form-group form-group-default"> 
        <label class="to-uppercase">label2</label> 
        <input type="text" class="form-control"> 
       </div> 
      </div> 
      <div class="col-lg- col-md-3 col-sm-3"> 
       <div class="form-group form-group-default"> 
        <label class="to-uppercase">label3</label> 
        <input type="text" class="form-control"> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

    <div id="div2" class=""> 
    <p class="s7-gift-title"><span class="reward-num"> </span>second row</p> 
    <div class="text-left"> 
     <div class="row"> 
      <div class="col-lg-6 col-md-5 col-sm-5"> 
       <div class="form-group form-group-default"> 
        <label class="to-uppercase">label1</label> 
        <input type="text" class="form-control"> 
       </div> 
      </div> 
      <div class="col-lg-3 col-md-4 col-sm-4"> 
       <div class="form-group form-group-default"> 
        <label class="to-uppercase">label2</label> 
        <input type="text" class="form-control"> 
       </div> 
      </div> 
      <div class="col-lg- col-md-3 col-sm-3"> 
       <div class="form-group form-group-default"> 
        <label class="to-uppercase">label3</label> 
        <input type="text" class="form-control"> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
</div><!--end rewards container --> 
<button class="btn btn-lg btn-success" id="save">save</button> 

JS：

$("#save").click(function(){ 
    var giftsObjs=[]; 
    var rewardContainer = $("#reward-container").children(); 
    var inputPerRow; 
    for(var i=0;i<rewardContainer.length;i++){ 
     inputPerRow=$(rewardContainer[i]).find("input"); 
     for(var k=0;k<inputPerRow.length;k++){ 
      if($(inputPerRow[k]).val()==""){ 
       alert("Please fill all fields before you proceed."); 
       return; 
      }else{ 
       switch (k){ 
        case 0: 
         giftsObjs.push({ 
          description: $(inputPerRow[k]).val() 
         }); 
         break; 
        case 1: 
         giftsObjs.push({ 
          value: $(inputPerRow[k]).val() 
         }); 
         break; 
        case 2: 
         giftsObjs.push({ 
          quantity: $(inputPerRow[k]).val() 
         }); 
         break; 
       }//end of switch 

      } 
     } 
    } 
console.log("array of gifts object: "+giftsObjs); 
}); 

Answer 1

你幾乎沒有但對於一些變化的邏輯：

更新JavaScript的：

$("#save").click(function(){ 
      var giftsObjs=[]; 
      var rewardContainer = $("#reward-container").children(); 
      var inputPerRow; 
      for(var i=0;i<rewardContainer.length;i++){ 
       var obj = {}; 
       inputPerRow=$(rewardContainer[i]).find("input"); 
       for(var k=0;k<inputPerRow.length;k++){ 
        if($(inputPerRow[k]).val()==""){ 
         alert("Please fill all fields before you proceed."); 
         return; 
        }else{ 
         // Do not push the property to the array directly here. Instead add the property to an object. 
         switch (k){ 
          case 0: 

            obj.description= $(inputPerRow[k]).val() 

           break; 
          case 1: 

            obj.value= $(inputPerRow[k]).val() 

           break; 
          case 2: 

            obj.quantity= $(inputPerRow[k]).val() 

           break; 
         }//end of switch 

        } 
       } 
       giftsObjs.push(obj); 
      } 

      console.log("array of gifts object: "+giftsObjs); 
console.log(giftsObjs); 
     }); 

工作小提琴：http://jsfiddle.net/sandenay/cu6nebx2/3/

Answer 2

更新你的小提琴，checkout。

在每次循環加入項目的Istead，我改變giftsObjs.push({...})到 giftsObjs[i].property=value其中giftsObjs[i]是在同一行中的對象。

for(var i=0;i<rewardContainer.length;i++){ 
        inputPerRow=$(rewardContainer[i]).find("input"); 
        giftsObjs[i] = {}; 
        for(var k=0;k<inputPerRow.length;k++){ 
         if($(inputPerRow[k]).val()==""){ 
          alert("Please fill all fields before you proceed."); 
          return; 
         }else{ 
          switch (k){ 
           case 0: 
            giftsObjs[i].description = $(inputPerRow[k]).val() 
            break; 
           case 1: 
            giftsObjs[i].value = $(inputPerRow[k]).val() 
            break; 
           case 2: 
            giftsObjs[i].quantity = $(inputPerRow[k]).val() 
            break; 
          }//end of switch 

         } 
        } 
       } 

Answer 3

您可以使用.map().get()是這樣的：

$(function() { 
 

 
    $('#save').click(function(e) { 
 

 
    var arr = $('#reward-container > div').map(function(i, v) { 
 
     return { 
 
     description: $('input', this).eq(0).val(), 
 
     value: $('input', this).eq(1).val(), 
 
     quantity: $('input', this).eq(2).val() 
 
     }; 
 
    }).get(); 
 

 

 
    $('#logger').html('<pre>' + JSON.stringify(arr) + '</pre>'); 
 

 
    }); 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="reward-container"> 
 
    <!--rewards container --> 
 
    <div id="div1" class=""> 
 
    <p class="s7-gift-title"><span class="reward-num"></span>first row</p> 
 
    <div class="text-left"> 
 
     <div class="row"> 
 
     <div class="col-lg-6 col-md-5 col-sm-5"> 
 
      <div class="form-group form-group-default"> 
 
      <label class="to-uppercase">label1</label> 
 
      <input type="text" class="form-control"> 
 
      </div> 
 
     </div> 
 
     <div class="col-lg-3 col-md-4 col-sm-4"> 
 
      <div class="form-group form-group-default"> 
 
      <label class="to-uppercase">label2</label> 
 
      <input type="text" class="form-control"> 
 
      </div> 
 
     </div> 
 
     <div class="col-lg- col-md-3 col-sm-3"> 
 
      <div class="form-group form-group-default"> 
 
      <label class="to-uppercase">label3</label> 
 
      <input type="text" class="form-control"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div id="div2" class=""> 
 
    <p class="s7-gift-title"><span class="reward-num"> </span>second row</p> 
 
    <div class="text-left"> 
 
     <div class="row"> 
 
     <div class="col-lg-6 col-md-5 col-sm-5"> 
 
      <div class="form-group form-group-default"> 
 
      <label class="to-uppercase">label1</label> 
 
      <input type="text" class="form-control"> 
 
      </div> 
 
     </div> 
 
     <div class="col-lg-3 col-md-4 col-sm-4"> 
 
      <div class="form-group form-group-default"> 
 
      <label class="to-uppercase">label2</label> 
 
      <input type="text" class="form-control"> 
 
      </div> 
 
     </div> 
 
     <div class="col-lg- col-md-3 col-sm-3"> 
 
      <div class="form-group form-group-default"> 
 
      <label class="to-uppercase">label3</label> 
 
      <input type="text" class="form-control"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!--end rewards container --> 
 
<button class="btn btn-lg btn-success" id="save">save</button> 
 
<div id='logger'></div>