Copy array of Objects in angular 2

Question

I have two array called 'persons' and 'persons2', The 'persons2' array would to be copy of 'persons' array, But the problem is when I copy it, and I want to change the second array, the first array is also changing. This is my code:

  export class AppComponent {

  persons = [
    {
      name:'David',
      lname:'Jeu'
    }
  ];

  persons2=[...this.persons];

  constructor(){
      console.log(this.persons[0]);
      this.persons2[0].name='Drake';
      console.log(this.persons[0]);

      console.log(this.persons2[0]);
  }

}

Duplicate with every other question here...

Akxe
– Akxe

2018-07-28 17:18:26 +00:00
Commented Jul 28, 2018 at 17:18 — Akxe
– Akxe, Commented Jul 28, 2018 at 17:18

amrender singh · Accepted Answer · 2018-07-28 17:22:09Z

8

But the problem is when I copy it, and I want to change the second array, the first array is also changing

That is because the objects inside both the arrays are sharing same reference. To perform a deep copy try the following :

let persons2 = person.map(x => Object.assign({}, x));

Or

let person2 = JSON.parse(JSON.stringify(person));

edited Jul 28, 2018 at 17:22

answered Jul 28, 2018 at 17:18

amrender singh

8,2594 gold badges27 silver badges30 bronze badges

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

5 Comments

Jack Over a year ago

Thanks it's working, But why this code does not work? persons2=[...this.persons];

amrender singh Over a year ago

@Jack That is because the objects inside person and person2 are sharing same reference. So changes made in one will be reflected in other.

Jack Over a year ago

I did :) . I am watching this youtube tutorial: youtube.com/watch?v=1tRLveSyNz8 , on 2:07:00 He did the same like me, and it worked for him. Can you explain me please?

amrender singh Over a year ago

@Jack sure would love to :-)

amrender singh Over a year ago

@Jack please move a further in video the guide has mentioned that add and remove operation on the new "Array" will not be reflected in the old array. But the existing objects in the new Array and old array remains same.That is in your case if you add/remove an object in person2 two array it will not be added/removed from person array.

brk · Accepted Answer · 2018-07-28 17:25:45Z

1

In your case both the array is referring to the same memory, which is commonly known as shallow copy.

You can make a deep copy of the first array and then change the second array. That will have no impact on the first array.

let persons = [{
  name: 'David',
  lname: 'Jeu'
}];

let persons2 = JSON.parse(JSON.stringify(persons));
persons2[0].age = 29;

console.log(persons)
console.log(persons2)

edited Jul 28, 2018 at 17:25

answered Jul 28, 2018 at 17:19

brk

50.3k10 gold badges59 silver badges85 bronze badges

Comments

mchl18 · Accepted Answer · 2018-07-28 17:48:27Z

1

For these kinds of operations it is usually wise using Lodash Clonedeep

answered Jul 28, 2018 at 17:48

mchl18

2,3661 gold badge16 silver badges23 bronze badges

Collectives™ on Stack Overflow

Copy array of Objects in angular 2

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related