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?

If you really want to avoid loops (directly or indirectly in the form of .find(), .filter(), ...) then store the index of a "state" in an object with the uuid as the key: { "1065d90b-1a90": 0, "4075a90c-2b77": 1 } — Andreas
– Andreas, Commented Aug 22, 2018 at 14:06
There's no way to avoid looping through the entire dataset at least once here. You could either store them as an object of UUID:object like you have, and update/add the value as needed, then iterate through the object and make your array. OR, you store it as the array style you need, loop through the array till you find the matching UUID and update the object at that index. I think the second method is a little better probably, because you can break out of the loop through the array when you find the index you're looking for. — rickjerrity
– rickjerrity, Commented Aug 22, 2018 at 14:10

Bergur · Accepted Answer · 2018-08-22 14:18:42Z

2

Here's some psuedo code:

Create an empty array (allStatus)
Use .findIndex to check if there's an item with that uuid and return the index of that object in the array.
If there is no object with that uuid, you can add the object to the allStatus array
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.

edited Aug 22, 2018 at 14:18

answered Aug 22, 2018 at 14:05

Bergur

4,07714 silver badges21 bronze badges

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

1 Comment

mhoff Over a year ago

OK this is probably some "indirect" looping inside "findIndex" - but I like it because its easy and readable. I tested here: stackblitz.com/edit/test-array-update?file=index.js

Collectives™ on Stack Overflow

javascript array of objects update by uuid

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related