Comparing two different data objects in Vue while reducing - vue.js

Question

I have existing data objects and a function which is looping through by employee and doing some light math (all of this is currently working as it needs to)
The thing that I need to add into this is allow my loop to do another check as it moves through. As I'm moving through my data_record object, I need to check the ID in my Data_record object against the ID in the boxes. If they match, I need to check stock_numbers against box_numbers. If stock_numbers is greater than box_numbers then I want to put "Not Available" as a string into my computed object so that I can show that in my template instead of the data.
I have a sandbox linked below where one file is doing this code shown below, but the file main.js is trying to match up the entries so that I can then compare data on the matches, however, it is currently only returning the entries of the first one that don't have a match
How can I properly match entries between objects and compare data of those matches while still performing this current reduce function?
<tr v-for="(labels, employee) in numbersByEmployee" :key="employee">
<td>#{{ employee }}</td>
<td v-for="date in dates" :key="date">#{{ labels[date] && labels[date].qty * labels[date].labels }}</td>
<td>#{{ labels.total }}</td>
</tr>
new Vue({
el: "#app",
data: {
data_record: [
{
employee: "Adam",
ID: "Ac1874/12-15",
Shelf_Date: "2021-07-14",
stock_numbers: 100,
labels: 25
}
],
boxes: [
{
ID: "Ac1874/12-15",
box_numbers: 50,
reception_date: "2021-07-20"
}
],
dates: ["2021-07-14", "2021-07-15"]
},
computed: {
numbersByEmployee() {
return this.data_record.reduce((r, o) => {
r[o.employee] ??= {};
r[o.employee][o.Shelf_Date] ??= {
stock_numbers: 0,
labels: 0,
total: 0
};
r[o.employee][o.Shelf_Date].stock_numbers += +o.stock_numbers;
r[o.employee][o.Shelf_Date].labels += +o.labels;
r[o.employee].total ??= 0;
r[o.employee].total += +o.stock_numbers * +o.labels;
return r;
}, {});
}
}
});
Code sandbox with this portion of code, as well as a work in progress for the matching (the main.js file is where I'm just trying to match up the two objects but it's currently showing the entries that don't match)
https://codesandbox.io/s/charming-glitter-83nzg?file=/src/main.js
EDIT (output for reduce function)
Currently, numbersByEmployees dumps
"Adam": { "2021-07-14": { "labels": 5, "stock_numbers": 40, "total": 0 }, "total": 200 }

Answer 1

You can use array.prototype.find to look in the box array for the id of the current item in record_data
I've forked your examaple to demonstrate this. I renamed some of the variables to match your code on stackoverflow.
https://codesandbox.io/s/agitated-diffie-ntmru
Let me know if I can edit this to better fit your need.