CODEWITHSUNDEEP
javascriptarraysangularjavascript-objectsangular-arrays
Jack
Jack

Reputation: 89

Copy array of Objects in angular 2

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]);
  }

}

Upvotes: 4

Views: 9053

Answers (3)

mchl18
mchl18

Reputation: 2336

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

Upvotes: 1

brk
brk

Reputation: 50291

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

enter image description here

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)

Upvotes: 1

amrender singh
amrender singh

Reputation: 8239

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));

Upvotes: 8

Related Questions