Array of array of objects reference in Javascript

Question

I have an array as follows

var sample = [{a:1, b: 1, c:1}, {a:1, b: 1, c:1}, {a:1, b: 1, c:1}];

I then run the following code and try groupsOfItems[0].sample[0].a = 10, groupsOfItems[0].sample[0].a, groupsOfItems[1].sample[0].a and groupsOfItems[2].sample[0].a get changed to 10.

How do I prevent this?

var sample = [{a:1, b: 1, c:1}, {a:1, b: 1, c:1}, {a:1, b: 1, c:1}];


    var groupsOfItems = [];

    for(let i = 0; i < 10; i++) {
        var item = {};
        item.sample = _.clone(sample);
        groupsOfItems.push(item);
    }



  groupsOfItems[0].sample[0].a = 10
  
  console.log(groupsOfItems[0].sample[0].a,groupsOfItems[1].sample[0].a,groupsOfItems[2].sample[0].a);

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

I created a snippet for you. Please do that in the future. Saves a lot of time when testing your code — mplungjan
– mplungjan, Commented May 6, 2016 at 5:41
Be wary of cloning objects using libraries (or just in general). If you call a method on a cloned object the method will still be referencing the original object and will modify the original object, not the cloned object. — Kyle Muir
– Kyle Muir, Commented May 6, 2016 at 5:42

Community · Accepted Answer · 2017-05-23 12:23:57Z

6

You need to clone the object before assiging its referece to the array's property

Replace

item.sample = sample;

with

item.sample = JSON.parse(JSON.stringify(sample));

Note that this method of cloning will be less efficient when the sample object grows. Try some other methods shown here.

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered May 6, 2016 at 5:35

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

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

4 Comments

Jaseem Abbas Over a year ago

I did try with _.clone. Didn't help

gurvinder372 Over a year ago

@JaseemAbbas did you tried the method I have shared

Jeremy J Starcher Over a year ago

@JaseemAbbas _.clone() is a shallow copy. the JSON method does a deep clone.

Jaseem Abbas Over a year ago

_.cloneDeep() saved my day. Cheers!

Community · Accepted Answer · 2017-05-23 12:23:57Z

0

as mentioned in this post

for(let i = 0; i < 10; i++) {
        var item = {};
        item.sample = $.extend(true, [], sample);
        groupsOfItems.push(item);
    }

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered May 6, 2016 at 5:49

Nouman Bhatti

1,4416 gold badges31 silver badges56 bronze badges

Comments

Kyle Muir · Accepted Answer · 2016-05-06 05:53:36Z

I would avoid cloning the object in general. Cloning objects only tends to end in pain further down the track. Here's how I have achieved similar in the past without cloning.

var sample = [{   a: 1,   b: 1,  c: 1}, {  a: 1,  b: 1,  c: 1}, {  a: 1,  b: 1,  c: 1}];
var groupsOfItems = [];

var Item = function(a, b, c) {
  this.a = a;
  this.b = b;
  this.c = c;
}

for (let i = 0; i < 10; i++) {
  var item = {};
  item.sample = _.map(sample, function(item) {
    return new Item(item.a, item.b, item.c)
  });
  groupsOfItems.push(item);
}

groupsOfItems[0].sample[0].a = 10

console.log(groupsOfItems[0].sample[0].a, groupsOfItems[1].sample[0].a, groupsOfItems[2].sample[0].a);
//10 1 1

This way you're assigning them all a container for your modifications and the problem with cloning goes away.

Collectives™ on Stack Overflow

Array of array of objects reference in Javascript

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related