Angular/Typescript: arrays in typescript changing when an independent element got changed

Question

Why my array element is getting updated when another variable which gets a copy of one of the item in the array is updated?

StackBlitz: https://stackblitz.com/edit/angular-3tgp7h

(check AppComponent)

Code:

export class AppComponent implements OnInit  {
  materials: Material[] = [];
  material: Material;

  ngOnInit(){
    
    this.materials = [
      {
        name: 'One',
        price:10,
      },
      {
        name: 'Two',
        price:10,
      },
      {
        name: 'Three',
        price:10,
      },
    ];

    this.material = this.materials.find(mat => mat.name === 'One');

    console.log('material ones price in the array: '+this.materials.find(mat => mat.name === 'One').price )

    //Update (single) material object

    this.material.price = 20;

   // below is displaying 20. but i didn't update array
   // why is this happening?
    console.log('material ones price in the array after update: '+this.materials.find(mat => mat.name === 'One').price )
  }
}

export interface Material {
  name: string;
  price: number;
}

You are getting a reference to an element in the array. So you are basically editing the item in the array. — Shadowlauch
– Shadowlauch, Commented Jun 20, 2018 at 6:06

Anshuman Jaiswal · Accepted Answer · 2018-06-20 06:34:09Z

3

It will give you reference of that object

this.material = this.materials.find(mat => mat.name === 'One');

And that's why it's updating the value in source array.

You can create a deep clone as:

let foundObj = this.materials.find(mat => mat.name === 'One');
if(foundObj) {
    foundObj = JSON.parse(JSON.stringify(foundObj));
}
this.material = foundObj;

edited Jun 20, 2018 at 6:34

answered Jun 20, 2018 at 6:08

Anshuman Jaiswal

5,4621 gold badge31 silver badges46 bronze badges

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

2 Comments

Pardeep Jain Over a year ago

JSON.parse(JSON.stringify()); is not perfact for all case and not recommended by community

Ravi Kumar BG Over a year ago

Thanks. Suggesting "community recommended" approach for deep cloning would help

Collectives™ on Stack Overflow

Angular/Typescript: arrays in typescript changing when an independent element got changed

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related