javascript array of objects update by uuid

Question

Hi maybe I'm block headed or just tired:
But i can't find an easy solution to update / manipulate an object array. (without several loops)

I'm getting (via a Listener callback every second) status updates in the form:

status = {     
  uuid: "1065d90b-1a90",
  status: "running",
  data1: "xxx", 
  data2: "xxx", ...
}
status = {     
  uuid: "4075a90c-2b77",
  status: "new",
  data1: "xxx", 
  data2: "xxx", ...
}

It could be a new data set (with new uniq uuid) or an update for an existing data set (existing uuid)

I want to collect them in a table and need an array in the form:

 [ {uuid: "1065d90b-1a90", status: "running", data1:"xxx", ...},
   {uuid: "4075a90c-2b77", status: "new", data1: "xxx", ...}, {uuid: ...} ]

I have tried a hash list (better key:value) based in the uuid as index:

let allStatus[status.uuid] = status

This works and is easy and fast on updates, but this produce:

    {  1065d90b-1a90: {uuid: "1065d90b-1a90", status: "running", data1:"xxx", ...},
       4075a90c-2b77: {uuid: "4075a90c-2b77", status: "new", data1: "xxx", ...}, 
       xxxxxxxx-xxxx: {uuid: ...}
    }

I can after that copy the complete list to the wanted array form. But I really like to avoid this since this will everytime (every sec) recreate the list, what is no good since it is used in a angular table for display.

How can I improve and direct update (create) the list/array?

Answer 1

Here's some psuedo code:

1. Create an empty array (allStatus)
2. Use .findIndex to check if there's an item with that uuid and return the index of that object in the array.
3. If there is no object with that uuid, you can add the object to the allStatus array
4. If there is an object with that uuid, you update that object with allStatus[index]

Here is a code-snippet to see it in action:

const incomingItem = {     
  uuid: "4075a90c-2b77",
  status: "new",
  data1: "yyy", 
  data2: "yyy",
}

const allStatus = [{     
  uuid: "1065d90b-1a90",
  status: "running",
  data1: "xxx", 
  data2: "xxx"
},{     
  uuid: "4075a90c-2b77",
  status: "new",
  data1: "xxx", 
  data2: "xxx"
}];


const index = allStatus.findIndex(item => item.uuid === incomingItem.uuid)

if (index === -1) {
 // Item not in , we can add it 
 allStatus.push(incomingItem);
} else {
 // Item is inside, we should update it 
 allStatus[index] = incomingItem;
}

console.log(allStatus);

Here you can see that incomingItem has the same uuid as item2 in allStatus, just a different data1 and data2. So we update it.

You can try to change uuid of incomingItem and log it out. allStatus should have three items.

Now you can loop through allStatus in your angular code.