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

Question

I have two rows, where each row consists of 3 input fields. I'm trying to create an array of objects, where each object has 3 properties (each input field data is saved in the corresponding property. I cant figure out how to create these objects. Right now the output is 6 objects with 1 property, instead of 2 objects with 3 properties each. Please advise. JSfiddle example is 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);
});

See it workingg here jsfiddle.net/sandenay/cu6nebx2/3

Sandeep Nayak
– Sandeep Nayak

2015-10-13 11:24:04 +00:00
Commented Oct 13, 2015 at 11:24 — Sandeep Nayak
– Sandeep Nayak, Commented Oct 13, 2015 at 11:24

Jai · Accepted Answer · 2015-10-13 11:36:10Z

2

You can make use of .map().get() something like this:

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

edited Oct 13, 2015 at 11:36

answered Oct 13, 2015 at 11:28

Jai

74.8k12 gold badges76 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

hindmost Over a year ago

I guess there should be $(this).find('input')... instead of $('input')...

Jai Over a year ago

@hindmost that is what i was updating.

hindmost Over a year ago

Furthermore, you could make use of nested .map()

Jai Over a year ago

That would be slow to process IMHO.

Alex Over a year ago

This is interesting. How would you implement checking for empty input fields on the fly and aborting the process if an empty fields detected?

|

Sandeep Nayak · Accepted Answer · 2015-10-13 11:24:52Z

You were almost there but for some changes in the logic:

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

Working fiddle: http://jsfiddle.net/sandenay/cu6nebx2/3/

lenilsondc · Accepted Answer · 2015-10-13 11:27:28Z

Updated your fiddle, checkout.

Istead of adding an item on each loop, I changed giftsObjs.push({...}) to giftsObjs[i].property=value where giftsObjs[i] is an object in one line.

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

                        }
                    }
                }

Collectives™ on Stack Overflow

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

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related