loop and push object into an array

Question

HTML

<div class="row">
  <div class="col-xs-5 stateName">Kuala Lumpur</div>
  <div class="col-xs-7"><input id="1" placeholder="0.00" type="text"/></div>
</div>

<div class="row">
  <div class="col-xs-5 stateName">Kuala Kangsar</div>
  <div class="col-xs-7"><input id="2" placeholder="0.00" type="text"/></div>
</div>

MY JS

var stateArr = [],
    tempObj = {};

$('.stateName').each(function(){
  tempObj.id = $(this).next('div').find('input').attr('id');
  tempObj.name = $(this).text();                
  stateArr.push(tempObj);
});
console.log(stateArr)

My result were all Kuala Kangsar , any idea what's wrong in my loop? I thought I did the loop right as I push the object into the array in the loop?

it all because you use one object reference. Move var tempObj = {}; inside loop — Grundy
– Grundy, Commented Jul 24, 2015 at 8:44
move your tempObj creation into your loop. As it is you have one object that you are just changing the values on. — Craicerjack
– Craicerjack, Commented Jul 24, 2015 at 8:46
Have you tried putting tempObj in the each function? $('.stateName').each(function(){ tempObj = {}; ... }); — Canvas
– Canvas, Commented Jul 24, 2015 at 8:48

Balachandran · Accepted Answer · 2015-07-24 08:51:23Z

4

Declare object inside loop tempObj={}

           var stateArr = [];
            $('.stateName').each(function(){
               var tempObj = {};  // declare obj inside loop
                tempObj['id'] = $(this).next('div').find('input').attr('id');
                tempObj['name'] = $(this).text();

                stateArr.push(tempObj);
            });

            console.log(stateArr);

Demo

edited Jul 24, 2015 at 8:51

answered Jul 24, 2015 at 8:45

Balachandran

9,6271 gold badge19 silver badges26 bronze badges

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

2 Comments

Grundy Over a year ago

i think better add var so temp would be local variable

mkutyba Over a year ago

And it is the matter of closures (I think so) developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

Grundy · Accepted Answer · 2015-07-24 09:00:30Z

1

Yet another way with only jQuery

var arr = $('.stateName').map(function(index, el){
  return {
    id : $(this).next('div').find('input').attr('id'),
    name : $(this).text() 
  };
}).toArray();

console.log(arr);

document.getElementById('res').innerHTML = JSON.stringify(arr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-xs-5 stateName">Kuala Lumpur</div>
  <div class="col-xs-7"><input id="1" placeholder="0.00" type="text"/></div>
</div>

<div class="row">
  <div class="col-xs-5 stateName">Kuala Kangsar</div>
  <div class="col-xs-7"><input id="2" placeholder="0.00" type="text"/></div>
</div>

<div id="res"></div>

answered Jul 24, 2015 at 9:00

Grundy

13.4k3 gold badges39 silver badges57 bronze badges

Comments

Pulkit Chaudhri · Accepted Answer · 2022-07-12 10:24:12Z

I've had a similar issue. This is because when you do following, you're only pushing a 'reference' to the object and when the object value is updated in the loop, the object that was pushed also changes value because it was merely a 'reference' and eventually the last value that was set in the loop is also set in the 'references', hence you see multiple values of the last object that was pushed.

stateArr.push(tempObj);

So, to tackle this issue you do the following:

stateArr.push(JSON.parse(JSON.stringify(tempObj))); //see Note below

The other way to prevent references is by doing the following:

let obj = { a: 1 };
let copy = Object.assign({}, obj); // Object.assign(target, ...sources)

obj.a = 2;
console.log(copy); // { a: 1 }
console.log(obj); // { a: 2 }

Note: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#warning_for_deep_clone

Collectives™ on Stack Overflow

loop and push object into an array

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related