Javascript Array items being overwritten

Question

I have a function that contains the following code:

stores = [];
console.log('in stores d.length is ', districts.length);
districts.forEach( function ( dis ) {
    dis.store.forEach( function( store ) {
        store.structure = dis.structure;
        store.structure.dis = dis.district_nbr;
        store.structure.sto = store.store_nbr;
        //store.message = getMessage(store.structure);
        console.log('store st is ', store.structure);
        stores.push( store );
    });
});
stores.forEach( function ( s ) {
    console.log("after set Master this is stores ", s.structure);
})

As the loops go, I initialize an object structure for each store starting out as the structure from the parent dis object which has a few fields and has been validated as correct. I then add an additional fields to the structure object to account for the district number and store number. Each dis object has a unique set of stores.

The console.log in the nested for loops displays the correct structure for the store. However, when I print them after the fact, the stores all have the final district number in the loop and the final store number in the loop instead of their respective correct values.

QUESTION: Does something happen in Array.push() that I'm not aware of that through things out of whack? I think my real question is what am I missing?

score 3 · Accepted Answer · edited May 23 '17 at 12:32

You need to clone the dis.structure to avoid modifying the same object in each iteration of the loop.

function clone(obj) {
  return JSON.parse(JSON.stringify(obj));
}

stores = [];
console.log('in stores d.length is ', districts.length);
districts.forEach( function ( dis ) {
    dis.store.forEach( function( store ) {
        store.structure = clone(dis.structure);
        store.structure.dis = dis.district_nbr;
        store.structure.sto = store.store_nbr;
        //store.message = getMessage(store.structure);
        console.log('store st is ', store.structure);
        stores.push( store );
    });
});
stores.forEach( function ( s ) {
    console.log("after set Master this is stores ", s.structure);
})

For more on deep-cloning objects, see this answer on stack overflow.

score 2 · Answer 2 · answered Apr 13 '17 at 16:36

2

The problem is that when you set store.structure = dis.structure, store.structure is now a reference to dis.structure, not a copy.

This means that every time you then mutate store.structure, you are in fact mutating the dis.structure.

answered Apr 13 '17 at 16:36

Aron

8,696
6
33
59

Suren Srapyan · Answer 3 · 2017-04-13T16:40:13.730

Your dis.store's items are same as stores items, because your stores's items are not values but references. So you put same references into 2 different arrays. And if you change the items from one reference, it will be updated also for the another one.

You need to copy them with Object.assign, but be aware it will copy only first level items Replace this line store.structure = dis.structure; with this store.structure = Object.assign({}, dis.structure);

Javascript Array items being overwritten

3 Answers3