angular 2 typescript : concat() work as mutable

Question

I am declaring an array on a provider @Injectable to use it in different components.

  normeList: any[] = [
    {
      name: 'choice 1',
      type:'false'
    },
    {
      name: 'choice 2',
      type:'false'
    }
  ];

On the component, I assigned that array like this:

this.myArray = [].concat(this.sharedListDeclarationProvider.normeList);

on the view, I am working with the myArray and I am changing the type on the myArray from false to true;

the problem is that 'myArray' on the component and normList declared on the provider also changing.

How can I change the value of the myArray without changing the normeList

What exactly are you trying? You want to copy normeList of your provider to myArray? — Gangadhar Jannu
– Gangadhar Jannu, Commented Oct 8, 2018 at 9:17

Gangadhar Jannu · Accepted Answer · 2018-10-09 03:22:16Z

1

I presume you want to clone the normeList array from provider and use it in your component.

If you want to copy the array without mutation or side effects you could use slice method of array but this would only works for simple arrays. For complex arrays you can use

JSON.parse(JSON.stringify(array))
ES6 version using spread operator [...array] along with map
combination of map with Object.assign should work

So for your case you can rewrite the below line

this.myArray = [].concat(this.sharedListDeclarationProvider.normeList);

with

this.myArray = this.sharedListDeclarationProvider.normeList.map(item=>Object.assign({}, item));

or even shorter using ES6 spread operator

this.myArray = this.sharedListDeclarationProvider.normeList.map(item=>{}..item));

edited Oct 9, 2018 at 3:22

answered Oct 8, 2018 at 9:30

Gangadhar Jannu

4,4626 gold badges33 silver badges55 bronze badges

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

Comments

Nikhil Aggarwal · Accepted Answer · 2018-10-08 09:09:24Z

1

You can use JSON.parse and JSON.stringify

this.myArray = JSON.parse(JSON.stringify((this.sharedListDeclarationProvider.normeList));

answered Oct 8, 2018 at 9:09

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

Collectives™ on Stack Overflow

angular 2 typescript : concat() work as mutable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related