Angular update object in object array

Question

Say i have the following object array  lets name it itemArray         totalItems   2     items                  id   1         name    foo                       id   2         name    bar                   And i have a subscription that returns the updated result of only id 2  How would i update the object array without looping through the entire array   What i would like is something like the example below   updateUser user       this myservice getUpdate user id       subscribe newitem   gt          this updateArray newitem                updateArray newitem       this itemArray items newitem id  name   newitem name       or even better  replacing the entire object     updateArray newitem       this itemArray items newitem id    newitem       This example however updates the array based on the index of the array  So how do i instead update based on newitem id   Template requested in comment    lt tr  ngFor  let u of itemsArray items  let i   index  gt     lt td gt    u id    lt  td gt     lt td gt    u name    lt  td gt     lt td gt       lt input type  checkbox  checked  u accepted    ngModel    itemsArray items i  accepted   ngModelChange   updateUser u   gt       lt label for  singleCheckbox-  i    gt  lt  label gt     lt  td gt   lt  tr gt

User · Accepted Answer

I have created this Plunker based on your example that updates the object equal to newItem.id

Here's the snippet of my functions:

showUpdatedItem(newItem){
    let updateItem = this.itemArray.items.find(this.findIndexToUpdate, newItem.id);

    let index = this.itemArray.items.indexOf(updateItem);


    this.itemArray.items[index] = newItem;

  }

  findIndexToUpdate(newItem) { 
        return newItem.id === this;
  }

Hope this helps.

User · Answer

Another approach could be   let myList     id  aaa1   name   aaa     id  bbb2   name   bbb     id  ccc3   name   ccc     let itemUpdated    id   aaa1   name   Another approach     myList find item   gt  item id    itemUpdated id  name   itemUpdated name

User · Answer

You can use for loop to find your element and update it   updateItem newItem     for  let i   0  i  lt  this itemsArray length  i            if this itemsArray i  id    newItem id           this users i    newItem

User · Answer

You can try this also to replace existing object  toDoTaskList                      id  abcd   name  test                     id  abcdc   name  test                     id  abcdtr   name  test                     newRecordToUpdate    id  abcdc   name  xyz    this toDoTaskList map  todo  i    gt             if  todo id    newRecordToUpdate  id               this toDoTaskList i    updatedVal

User · Answer

In angular typescript we can avoid mutation of the objects in the array    An example using your item arr as a BehaviorSubject      you can initialize the items  with the default array this items    new BehaviorSubject lt any gt   user1  user2         updateUser user      this myservice getUpdate user id  subscribe newitem   gt             remove old item      const items   this items  value filter  item    gt  item id     newitem id            add a the newItem and broadcast a new table      this items  next     items  newItem              And in the template you can subscribe on the items    lt tr  ngFor  let u of items    async  let i   index  gt      lt td gt    u id    lt  td gt      lt td gt    u name    lt  td gt      lt td gt           lt input type  checkbox  checked  u accepted   click   updateUser u   gt           lt label for  singleCheckbox-  i    gt  lt  label gt      lt  td gt   lt  tr gt

User · Answer

Updating directly the item passed as argument should do the job  but I am maybe missing something here    updateItem item     this itemService getUpdate item id     subscribe updatedItem   gt        item   updatedItem            EDIT   If you really have no choice but to loop through your entire array to update your item  use findIndex    let itemIndex   this items findIndex item   gt  item id    retrievedItem id   this items itemIndex    retrievedItem

User · Answer

I would rather create a map  export class item      name  string       id  string    let caches   new Map lt string  item gt       and then you can simply  this caches newitem id    newitem     even  this caches set newitem id  newitem      array is so 1999

User · Answer

updateValue data               retriving index from array      let indexValue   this items indexOf data          changing specific element in array      this items indexValue  isShow     this items indexValue  isShow

[angular] Angular update object in object array

Examples related to angular

Examples related to typescript