I'm facing a challenge with setting up a v-for loop for an array I've constructed, which is already in the desired format
Below is a snippet representing the data format. Essentially, I want to create a table for employees where the header consists of dates and the employee data is aligned with the respective date.
The problem lies in my inability to navigate down to the jobs level and pair the data for each table cell with the corresponding date in the header
Based on the array dumped below, I am looking for something like this:
Employee | 08/12/2021 | 08/13/2021
----------------------------------------------------------------
Miranda | Area 1234567 | Area 1234569
Job 123 - 10 Hours Job 184 - 18 Hours
Area 1234568
Job 167 - 15 Hours
Essentially, it involves matching the array records by employee and date (in the table header) and displaying the area/job information in the table cell where there's a match
How can I adjust the existing v-for loop structure I've initiated to achieve this?
const nest = (rows) =>
rows .reduce(
(a, row) => {
const employee = a [row .employee] || (a [row .employee] = {dates: {}})
const date = employee .dates [row .job_date] || (employee .dates [row .job_date] = {areas: {}})
const order = date .areas [row .area_number] || (date .areas [row .area_number] = {jobs: {}})
const job = order .jobs [row .job] || (order .jobs [row .job] = {hours: '', scans: '', job_date: ''})
job.hours += row.hours
job.scans += row.scans
job.job_date = row.job_date
return a
},
{}
);
new Vue({
el: "#app",
props: {
},
data: {
rows: [
{
employee: "Miranda",
job: "123",
hours: "10",
job_date: "08/12/2021",
scans: 37,
area_number: "1234567",
},
{
employee: "Miranda",
job: "167",
hours: "15",
scans: 12,
job_date: "08/12/2021",
area_number: "1234568",
},
{
employee: "Miranda",
job: "184",
hours: "18",
scans: 24,
job_date: "08/13/2021",
area_number: "1234569",
}
],
},
computed: {
numbersByEmployee() {
return nest(this.rows)
},
dates() {
const dates = [...new Set(this.rows.map(r => r.job_date))]
return dates.sort((a,b) => new Date(a) - new Date(b))
},
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table>
<thead>
<tr>
<th>Employee</th>
<th v-for="date in dates" :key="date">{{ date }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(areas,employee) in numbersByEmployee" :key="employee">
<td>{{employee}}</td>
<td v-for="date in dates" :key="date">
</td>
</tr>
</tbody>
</table>
{{numbersByEmployee}}
</div>