values getting duplicated when an object is pushed into array - javascript

Question

I'm doing a for loop in order to push the object into an array. But the final array output is getting the same duplicated values.

here is my code:

let jsuOrderData = [];
let jsuOrderSet = {
  jsuOrder: '',
  itemNo: '',
};

let response = [{
    itemno: 1,
    jsuordref: 'JSU21628'
  },
  {
    itemno: 1,
    jsuordref: 'JSU21729'
  },
];
console.log(response);

for (let i = 0; i < response.length; i++) {
  console.log(response[i].jsuordref);
  jsuOrderSet.jsuOrder = response[i].jsuordref;
  jsuOrderSet.itemNo = response[i].itemno;
  jsuOrderData.push(jsuOrderSet);
}
console.log(jsuOrderData);

I'm getting the output as

[{"itemNo": 1, "jsuOrder": "JSU21729"}, {"itemNo": 1, "jsuOrder": "JSU21729"}]

instead of expected output

[{"itemNo": 1, "jsuOrder": "JSU21628"}, {"itemNo": 1, "jsuOrder": "JSU21729"}]

Can anyone let me know where it's wrong? Please...

Nisala · Answer 1 · 2021-06-13T04:48:46.413

This is because when you push jsuOrderSet into jsuOrderData, you're not passing a copy of the object into the array. Instead, you're passing a "reference" to jsuOrderSet. So, when you change jsuOrderSet and push it into the array again, you're just pushing that same reference into the array, over and over -- so the values will all be the same, set to whatever you set jsuOrderSet to last. To get around this, move the declaration of jsuOrderSet into the for loop, so it's a different object reference each time, like this:

let response = [{
    itemno: 1,
    jsuordref: 'JSU21628'
  },
  {
    itemno: 1,
    jsuordref: 'JSU21729'
  },
];

jsuOrderData = [];
for (let i = 0; i < response.length; i++) {
  let jsuOrderSet = {
    jsuOrder: '',
    itemNo: '',
  };
  console.log(response[i].jsuordref);
  jsuOrderSet.jsuOrder = response[i].jsuordref;
  jsuOrderSet.itemNo = response[i].itemno;
  jsuOrderData.push(jsuOrderSet);
}
console.log(jsuOrderData);

Here's a clear way to show how this "reference" thing works with a more generic example:

let obj = {
  val: 1
};
let arr = [];

for (let i = 0; i < 5; ++i) {
  arr.push(obj);
}

// Every item will have val: 1
console.log(JSON.stringify(arr));

// However, if we change obj.val to 2...
obj.val = 2;

// Because the array stores references to obj
// and not copies of obj when obj was pushed into
// the array, the val attribute will have updated
// for every object in the array, despite the fact that
// we haven't directly changed the array at all!
console.log(JSON.stringify(arr));

@Harry Glad I could help! Since you found this answer helpful, please mark it as correct when you get the chance :) https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work — Nisala, Jun 13 '21 at 04:54

score 0 · Answer 2 · answered Jun 13 '21 at 04:57

or you can use this.

let jsuOrderSet = {};

let response = [
    {itemno: 1, jsuordref: 'JSU21628'},
    {itemno: 1, jsuordref: 'JSU21729'},
];

let jsuOrderData = [];

for (let i = 0; i < response.length; i++) {
  let obj = {jsuordref : response[i].jsuordref,  itemno: response[i].itemno};
  jsuOrderData.push(obj);
}
console.log(jsuOrderData);

values getting duplicated when an object is pushed into array - javascript

2 Answers2