Javascript My Array Push is only getting the last value

Question

I have this for loop that I want to increment the year on every cycle, but I'm only getting the last year all repeating multiple times.

for (let i = 0; i < 2; i++) {
  this.data.year = new Date().getFullYear() + i;
  this.data.noSolar = averageBill * increaseRate;
  this.data.withSolar = (contractAmount * .004) + customerCharge;
  this.data.saving = (contractAmount * .004 + customerCharge) * 12 - (averageBill * 12);
  this.data.check = SREC;
  this.data.total = (contractAmount * .004 + customerCharge) * 12 - (averageBill * 12) + SREC;

  this.dataSource.push(this.data);
}

The Year in this case 2020 is showing twice. I want something like 2019 and 2020. Its like the variable is being reference multiple times.

Well, you are putting the reference to the same object (`this.data`) multiple times on the array. Maybe, you can create a new object inside the loop (not using `this.data` for store the values) and then push this new object inside `this.dataSource` — Shidersz, May 29 '19 at 04:03
https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript — Jojofoulk, May 29 '19 at 04:04
So you would close the Object after the push or before the push? — Millenial2020, May 29 '19 at 04:06

score 7 · Accepted Answer · answered May 29 '19 at 04:08

A new object should be created on each iteration. You are referring to the same object every time.

You can do like this,

for (let i = 0; i < 2; i++) {
  this.dataSource.push({
     year : new Date().getFullYear() + i,
     noSolar : averageBill * increaseRate,
     withSolar : (contractAmount * .004) + customerCharge,
     saving : (contractAmount * .004 + customerCharge) * 12 - (averageBill * 12),
     check : SREC,
     total : (contractAmount * .004 + customerCharge) * 12 - (averageBill * 12) + SREC,
  });
}

or do like,

for (let i = 0; i < 2; i++) {
      this.data=new DataSourceObject();
      this.data.year = new Date().getFullYear() + i;
      this.data.noSolar = averageBill * increaseRate;
      this.data.withSolar = (contractAmount * .004) + customerCharge;
      this.data.saving = (contractAmount * .004 + customerCharge) * 12 - (averageBill * 12);
      this.data.check = SREC;
      this.data.total = (contractAmount * .004 + customerCharge) * 12 - (averageBill * 12) + SREC;

      this.dataSource.push(this.data);
    }

score 1 · Answer 2 · answered May 29 '19 at 04:07

Reference of object is pushed in array. Instead clone or create copy and then push

    const temp = {};
    for (let i = 0; i < 2; i++) {
      this.data.year = new Date().getFullYear() + i;
      this.data.noSolar = averageBill * increaseRate;
      this.data.withSolar = (contractAmount * .004) + customerCharge;
      this.data.saving = (contractAmount * .004 + customerCharge) * 12 - (averageBill * 12);
      this.data.check = SREC;
      this.data.total = (contractAmount * .004 + customerCharge) * 12 - (averageBill * 12) + SREC;
      // this.dataSource.push(...this.data)
      Object.assign(temp, this.data);
      this.dataSource.push(temp);
    };

That code only works if I move the const temp inside the for loop. — Millenial2020, May 29 '19 at 04:11

score 0 · Answer 3 · answered May 29 '19 at 04:17

You may try this:-

for (let i = 0; i < 2; i++) {
  this.data.year = new Date().getFullYear() + i;
  this.data.noSolar = averageBill * increaseRate;
  this.data.withSolar = (contractAmount * .004) + customerCharge;
  this.data.saving = (contractAmount * .004 + customerCharge) * 12 - (averageBill * 12);
  this.data.check = SREC;
  this.data.total = (contractAmount * .004 + customerCharge) * 12 - (averageBill * 12) + SREC;

  this.dataSource.push(Object.assign({}, this.data));
}

Javascript My Array Push is only getting the last value

3 Answers3