How to update array in Angular?

Question

Hi I am developing web application in Angular 5. I have one array and I want to update the same array based on the value of another array. For example, I have createarray as below.

I have another object as below.

data:{
checked:true,
name:infomodel
}

Now there is checked true in data. So for infomodel in createarray I want to update the checked property.

I tried as below.

           let copyCreate = Object.assign({}, node.data);
            copyCreate.checked = true;
            const targetIdxCreate = this.createnode.map(item => item.name).indexOf(copyCreate.name);
            this.createnode[targetIdxCreate] = copyCreate;

            let copyUpdate = Object.assign({}, node.data);
            copyUpdate.checked = false;
            const targetIdxUpdate = this.updatenode.map(item => item.name).indexOf(copyUpdate.name);
            this.updatenode[targetIdxUpdate] = copyUpdate;

In the above code, It updates createnode checked with true. Also I am making updatenode chcked to false. After executing the above code, both arrays will have checked property false.

can someone help me to do this?

your `createnode` array has "Info model" and your `another object` has "infomodel".....`find()` will return nothing. — j4rey, Sep 14 '18 at 07:38

score 2 · Accepted Answer · answered Sep 14 '18 at 07:37

2

I would suggest to add the check based on 'id' field that you have in your record that you want to update with. In that case the ideal way to update the record would like like below:

// Assuming updateWith is the object that you want to update with
const targetIdx = this.createnode.map(item => item.id).indexOf(this.updateWith.id);
this.createnode[targetIdx] = this.updateWith;

if you still prefer to use 'name' as a parameter that you want to check the condition for, then you can just change the id to name in the map function like so:

// Assuming updateWith is the object that you want to update with
const targetIdx = this.createnode.map(item => item.name).indexOf(this.updateWith.name);
this.createnode[targetIdx] = this.updateWith;

Hope this solves your problem :)

answered Sep 14 '18 at 07:37

Sandeep K Nair

2,512
26
26

Thanks for the answer but I dont have ID filed in createarray but i have it in other array. – Niranjan Sep 14 '18 at 07:38
Then you can go with the second option, if that case suits you. Either way the logic for replacing is same. Just the parameter with with you want to choose to compare with is upto your usecase :) – Sandeep K Nair Sep 14 '18 at 07:41
Your answer works fine. But I have updated my code above. Whenever I update other array updatenode then both arrays will have false, But createnode array supposed to have true and updatenode array supposed to have false. – Niranjan Sep 14 '18 at 08:00
What is 'node.data'? Is it a global value or some thing? The problem that i feel happening here is when you update node.data object for the second time it is changing it's values in the previous object with which it was mapped to. In order to prevent this condition you may have to copy the 'node.data' properties to another object before making the new update 'Object.assign({}, myOldObject)' and then update your new record with the copy that you have obtained. Link here 'https://stackoverflow.com/questions/39506619/angular2-how-to-copy-object-into-another-object' – Sandeep K Nair Sep 14 '18 at 08:46
yes it is global object. I changed as you said but same issue i am facing. I have updated my code above. still am i missing something? – Niranjan Sep 14 '18 at 09:26
Please see the codepen [How to update array in Angular](https://codepen.io/sandeepknair/pen/eLjNqG?editors=1010) based on my understanding about the usecase. I have written this in typescript. You may have to make the necessary changes in your angular code though when you use the fields. Let me know if this is what you are trying to achieve. – Sandeep K Nair Sep 14 '18 at 10:03
Problem is createnode and updatenode was same. Atleast it should differ by ID. Am i right? – Niranjan Sep 14 '18 at 10:06
Yes, assuming if that is what you are trying to achieve. – Sandeep K Nair Sep 14 '18 at 10:07

score 1 · Answer 2 · answered Sep 14 '18 at 07:37

1

Simply use array = array.slice(). That will create a new Array Object, trigger ChangeDetection etc

answered Sep 14 '18 at 07:37

Daddelbob

406
4
13

score 1 · Answer 3 · answered Sep 14 '18 at 07:39

1

Try replacing your code with this

let item = this.createnode.find(item => item.name == data.name)
item.checked = data.checked;
this.createnode = [...this.createnode, item];

answered Sep 14 '18 at 07:39

Maksym Shevchenko

718
6
11

How to update array in Angular?

3 Answers3