Array of objects contains same object over and over again

Question

I create multiple objects and push them to the array objArr:

var objArr = [];
var obj = {};
var height = [9,8,7,3,6,5,2,4];

for (var i = 0; i < 8; i++) {
debugger;
  var mountainH = height[i];

  obj.h = mountainH;
  obj.index = i;

  objArr.push(obj);
}

for (var i = 0; i < objArr.length; i++) {

  alert(objArr[i].h);
}

But as you can see, each object has the same values. Why?

Because you aren't creating a bunch of objects, just modifying the same one over and over. — takendarkk
– takendarkk, Commented Feb 12, 2018 at 22:09
Because you're reusing the same obj on each push. So each time you mutate it by doing obj.h = ... it will change all the previously pushed ones too. Try creating the object inside the loop instead. — CRice
– CRice, Commented Feb 12, 2018 at 22:09
You shouldn't use a for loop with a static number like that. If you array changes, you have to modify it. use height.length to avoid nonsensical issues — Sterling Archer
– Sterling Archer, Commented Feb 12, 2018 at 22:15
Possible duplicate of Array.push() makes all elements the same when pushing an object — Heretic Monkey
– Heretic Monkey, Commented Feb 12, 2018 at 22:21

Ele · Accepted Answer · 2018-02-12 22:11:06Z

4

Put the initialization of obj within your for-loop.

You were re-assigning new values to a global variable obj.

var objArr = [];

var height = [9,8,7,3,6,5,2,4];

for (var i = 0; i < 8; i++) {
debugger;
  var obj = {};
  var mountainH = height[i];

  obj.h = mountainH;
  obj.index = i;

  objArr.push(obj);
}

for (var i = 0; i < objArr.length; i++) {

  console.log(objArr[i].h);
}

edited Feb 12, 2018 at 22:11

answered Feb 12, 2018 at 22:09

Ele

33.8k7 gold badges43 silver badges80 bronze badges

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

3 Comments

Black Over a year ago

I even tried this before on jsfiddle, but then the whole site freezed.

Ele Over a year ago

@Black that's weird. Probably you had a further logic.

Black Over a year ago

you are probably right, it was probably other code which comes after it which causes the freeze

void · Accepted Answer · 2018-02-12 22:10:10Z

3

Because the scope of obj in your code is global and it should rather be contained in the for loop.

If you will not declare it inside the loop then the value will get overwritten of the same obj on each iteration instead of a new memory allocation.

var objArr = [];
var height = [9, 8, 7, 3, 6, 5, 2, 4];

for (var i = 0; i < 8; i++) {
  debugger;
  var mountainH = height[i];
  var obj = {};

  obj.h = mountainH;
  obj.index = i;

  objArr.push(obj);
}
console.log(obj);

answered Feb 12, 2018 at 22:10

void

36.8k10 gold badges72 silver badges111 bronze badges

Comments

user9274775 · Accepted Answer · 2018-02-12 22:18:59Z

As noted, you need to initialize a new object in each iteration of the loop, otherwise all your array members simply share the same object reference.

Additionally, your code can be greatly reduced by building the array using .map(), and fully using the object literal initializer to declare the properties.

var height = [9,8,7,3,6,5,2,4];
var objArr = height.map((n, i) => ({h: n, index: i}));

console.log(objArr);

This is shorter and clearer. For every number in height, it creates a new object and adds it to a new array, which is returned from .map().

It can be even a little shorter with the newer features for object literals.

var height = [9,8,7,3,6,5,2,4];
var objArr = height.map((h, index) => ({h, index}));

console.log(objArr);

Collectives™ on Stack Overflow

Array of objects contains same object over and over again

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related