I have two arrays of objects. How can i take the property from one array and override the 'value' property of the other array? Currently I'm doing this but it seems quite wonky to do it this way. The original array 'streamingTiles' contains other properties, which is why i have the '...'
Goal is to replace 'value' in streamingTiles with 'counts' value from refTiles based on the matching UID per object
const streamingTiles = [
{uid: 57, value: 10, ...},
{uid: 30, value: 51, ...},
{uid: 14, value: 24, ...},
{uid: 47, value: 73, ...},
]
const refTiles = [
{uid: 14, counts: 10},
{uid: 57, counts: 51},
{uid: 30, counts: 24},
{uid: 47, counts: 73},
]
// replace value in streamingTiles with 'count' value from refTiles
const tiles = streamingTiles.map((item) => {
var refObj = refTiles.find((obj) => {
return obj.uid === item.uid;
});
return { ...item, ...{ value: refObj["counts"] } };
});
UPDATED QUESTION
If I renamed 'counts' to be 'value', would the same solution of replacing the 'value' in streamingTiles array with the 'value' from refTiles based on matching UID apply?
const streamingTiles = [
{uid: 57, value: 10, ...},
{uid: 30, value: 51, ...},
{uid: 14, value: 24, ...},
{uid: 47, value: 73, ...},
]
const refTiles = [
{uid: 14, value: 10},
{uid: 57, value: 51},
{uid: 30, value: 24},
{uid: 47, value: 73},
]
Process the refTiles into an object to avoid find calls for each item.
const streamingTiles = [
{ uid: 57, value: 10 },
{ uid: 30, value: 51 },
{ uid: 14, value: 24 },
{ uid: 47, value: 73 },
];
const refTiles = [
{ uid: 14, counts: 10 },
{ uid: 57, counts: 51 },
{ uid: 30, counts: 24 },
{ uid: 47, counts: 73 },
];
const refs = refTiles.reduce(
(acc, curr) => ((acc[curr.uid] = curr.counts), acc),
{}
);
const titles = streamingTiles.map((item) => ({
...item,
value: refs[item.uid] ?? item.value,
}));
console.log(titles);You can just remove the unnecessary object destruction:
const tiles = streamingTiles.map((item) => {
var refObj = refTiles.find((obj) => {
return obj.uid === item.uid;
});
return { ...item, value: refObj["counts"]};
});