Javascript->Iterating in for loop.Changes in Child variable changing parent variable

Question

I have one parent array and I am taking a filtered array(child array) from parent array.Up on changing the child array my parent array is changing.Can you please help how can I have the same parent array unchanged.

let parentArray=[
  { "id":"1", "Package":"Tes1", "Version":"20080210-1.1", "Maintainer":"Stefano Canepa"},
  { "id":"1", "Package":"Test2", "Version":"7.0-1", "Maintainer":"Debian Games Team"},
  { "id":"1", "Package":"Test3", "Version":"20080210-1.1", "Maintainer":"Stefano Canepa"},
  { "id":"1", "Package":"Test4", "Version":"7.0-1", "Maintainer":"Debian Games Team"},
  { "id":"5", "Package":"Tdst5", "Version":"20080210-1.1", "Maintainer":"Stefano Canepa"},
  { "id":"6", "Package":"Test6", "Version":"7.0-1", "Maintainer":"Debian Games Team"},
  { "id":"7", "Package":"Test7", "Version":"20080210-1.1", "Maintainer":"Stefano Canepa"},
  { "id":"8", "Package":"Test8", "Version":"7.0-1", "Maintainer":"Debian Games Team"}
];
let childArray=parentArray.filter(x=>x.id=="1");
console.log("before"+JSON.stringify(parentArray));
childArray.forEach(value=>value.Package="changed")
console.log("after"+JSON.stringify(parentArray));

Mark · Accepted Answer · 2018-08-18 04:04:54Z

filter() doesn't make copies of the objects. It just gives you a new array with references to the exact same objects in parentArray.

If you want copies in childArray you'll need to do it yourself. One way to do this is to use map() together with Object.assign(), which will make shallow copies of your objects:

let parentArray=[
    { "id":"1", "Package":"Tes1", "Version":"20080210-1.1", "Maintainer":"Stefano Canepa"},
    { "id":"1", "Package":"Test2", "Version":"7.0-1", "Maintainer":"Debian Games Team"},
    { "id":"1", "Package":"Test3", "Version":"20080210-1.1", "Maintainer":"Stefano Canepa"},
    { "id":"1", "Package":"Test4", "Version":"7.0-1", "Maintainer":"Debian Games Team"},
    { "id":"5", "Package":"Tdst5", "Version":"20080210-1.1", "Maintainer":"Stefano Canepa"},
    { "id":"6", "Package":"Test6", "Version":"7.0-1", "Maintainer":"Debian Games Team"},
    { "id":"7", "Package":"Test7", "Version":"20080210-1.1", "Maintainer":"Stefano Canepa"},
    { "id":"8", "Package":"Test8", "Version":"7.0-1", "Maintainer":"Debian Games Team"}
  ];
 
 let childArray=parentArray.filter(x=>x.id=="1")
      .map(obj => Object.assign({}, obj))  // make copies
      
 console.log("before"+JSON.stringify(parentArray));
 childArray.forEach(value=>value.Package="changed")
 console.log("after"+JSON.stringify(parentArray));

there is no change of code apart from the map. i tested the OP code and parentArray does change. How can it happen?
@david I'm not sure I understand what you're asking. The only change in my example is map if loops over each object and returns a copy. The point is that in the original Parent and Child arrays both point to the same objects in memory. When you change it in one place, it changes in the other.
just to highlight: "making shallow copy" means that all nested objects inside array item will still be "copied" by reference. So Object.assign should be safe to use only if your objects are flat. Otherwise OP will need JSON.parse(JSON.stringify(...)) to get in-deep copy.

Collectives™ on Stack Overflow

Javascript->Iterating in for loop.Changes in Child variable changing parent variable

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related