Jquery\JS - 从输入字段创建对象数组时遇到问题

Question

我有两行，每行包含 3 个 input 字段。我正在尝试创建一个 object 数组，其中每个 object 有 3 个属性（每个输入字段数据都保存在相应的属性中。我不知道如何创建这些对象。现在输出是 6 个对象和 1 属性，而不是 2 个对象，每个对象有 3 个属性。请指教。 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);
        });

工作 fiddle: http://jsfiddle.net/sandenay/cu6nebx2/3/

Answer 2

更新了您的 fiddle、checkout。

我没有在每个循环中添加一个项目，而是将 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>

Jquery\JS - 从输入字段创建对象数组时遇到问题

Jquery\JS - Having troubles creating an array of objects from input fields

javascript

jquery

javascript-objects