How to display view in vue js based on object data?
Solution 1:
Try using v-for
new Vue({
el: '#app',
name: 'App',
data() {
return {
arrayDates: ["2022-01-24", "2022-01-25", "2022-01-26", "2022-02-27", "2022-02-28"],
datas: [
{
"id": 1,
"name": "Sandra Brooke",
"schedule_time": [
{
"id": 1,
"dateFrom": "2022-01-24",
"dateTo": "2022-02-28",
"schedule_day": [
{ "id": 1, "days": "Monday", "startTime": "08:00:00", "endTime": "18:00:00" },
{ "id": 2, "days": "Tuesday", "startTime": "08:00:00", "endTime": "18:00:00" },
{ "id": 3, "days": "Wednesday", "startTime": "08:00:00", "endTime": "18:00:00" },
{ "id": 4, "days": "Thursday", "startTime": "08:00:00", "endTime": "18:00:00" },
{ "id": 5, "days": "Friday", "startTime": "08:00:00", "endTime": "16:00:00" },
]
}
]
},
{
"id": 2,
"name": "Michael Anderson",
"schedule_time": [
{
"id": 1,
"dateFrom": "2022-01-24",
"dateTo": "2022-02-28",
"schedule_day": [
{ "id": 1, "days": "Monday", "startTime": "08:00:00", "endTime": "18:00:00" },
{ "id": 2, "days": "Tuesday", "startTime": "08:00:00", "endTime": "18:00:00" },
{ "id": 3, "days": "Wednesday", "startTime": "08:00:00", "endTime": "18:00:00" },
{ "id": 4, "days": "Thursday", "startTime": "08:00:00", "endTime": "18:00:00" },
{ "id": 5, "days": "Friday", "startTime": "08:00:00", "endTime": "16:00:00" },
]
}
]
},
{
"id": 3,
"name": "Sarah Black",
"schedule_time": [
{
"id": 1,
"dateFrom": "2022-01-24",
"dateTo": "2022-02-28",
"schedule_day": [
{ "id": 1, "days": "Monday", "startTime": "08:00:00", "endTime": "18:00:00" },
{ "id": 2, "days": "Tuesday", "startTime": "08:00:00", "endTime": "18:00:00" },
{ "id": 3, "days": "Wednesday", "startTime": "08:00:00", "endTime": "18:00:00" },
{ "id": 4, "days": "Thursday", "startTime": "08:00:00", "endTime": "18:00:00" },
{ "id": 5, "days": "Friday", "startTime": "08:00:00", "endTime": "16:00:00" },
]
}
]
},
],
}
},
})table,
th,
td {
border: 1px solid black;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<div id="app">
<div>
<div class="container">
<table>
<tr>
<td></td>
<td v-for="date in arrayDates" :key="date">
{{ date }}
</td>
</tr>
<template v-for="data in datas">
<tr v-for="time in data.schedule_time" :key="time.id">
<td>{{data.name}}</td>
<td v-for="day in time.schedule_day" :key="day.id">
{{day.startTime}} - {{day.endTime}}
</td>
</tr>
</template>
</table>
</div>
</div>
</div>A sample implementation using computed property will be as below
const getDatesBetweenDates = (startDate, endDate) => {
let dates = []
//to avoid modifying the original date
const theDate = new Date(startDate)
while (theDate < endDate) {
const date = new Date(theDate);
const dateStr = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;
dates = [...dates, dateStr]
theDate.setDate(theDate.getDate() + 1)
}
return dates
}
new Vue({
el: '#app',
name: 'App',
data() {
return {
datas: [
{
"id": 1,
"name": "Sandra Brooke",
"schedule_time": [
{
"id": 1,
"dateFrom": "2022-01-24",
"dateTo": "2022-02-28",
"schedule_day": [
{ "id": 1, "days": "Monday", "startTime": "08:00:00", "endTime": "18:00:00" },
{ "id": 2, "days": "Tuesday", "startTime": "08:00:00", "endTime": "18:00:00" },
{ "id": 3, "days": "Wednesday", "startTime": "08:00:00", "endTime": "18:00:00" },
{ "id": 4, "days": "Thursday", "startTime": "08:00:00", "endTime": "18:00:00" },
{ "id": 5, "days": "Friday", "startTime": "08:00:00", "endTime": "16:00:00" },
]
}
]
},
{
"id": 2,
"name": "Michael Anderson",
"schedule_time": [
{
"id": 1,
"dateFrom": "2022-01-24",
"dateTo": "2022-02-28",
"schedule_day": [
{ "id": 1, "days": "Monday", "startTime": "08:00:00", "endTime": "18:00:00" },
{ "id": 2, "days": "Tuesday", "startTime": "08:00:00", "endTime": "18:00:00" },
{ "id": 3, "days": "Wednesday", "startTime": "08:00:00", "endTime": "18:00:00" },
{ "id": 4, "days": "Thursday", "startTime": "08:00:00", "endTime": "18:00:00" },
{ "id": 5, "days": "Friday", "startTime": "08:00:00", "endTime": "16:00:00" },
]
}
]
},
{
"id": 3,
"name": "Sarah Black",
"schedule_time": [
{
"id": 1,
"dateFrom": "2022-01-24",
"dateTo": "2022-02-28",
"schedule_day": [
{ "id": 1, "days": "Monday", "startTime": "08:00:00", "endTime": "18:00:00" },
{ "id": 2, "days": "Tuesday", "startTime": "08:00:00", "endTime": "18:00:00" },
{ "id": 3, "days": "Wednesday", "startTime": "08:00:00", "endTime": "18:00:00" },
{ "id": 4, "days": "Thursday", "startTime": "08:00:00", "endTime": "18:00:00" },
{ "id": 5, "days": "Friday", "startTime": "08:00:00", "endTime": "16:00:00" },
]
}
]
},
],
}
},
computed: {
modifiedData() {
const data = Object.assign([], this.datas);
const dataObj = {
header: [], // Holding headers
values: [], // Holding parsed time
}
data.forEach((node) => {
node.schedule_time.forEach((time) => {
const fromDate = new Date(time.dateFrom);
const toDate = new Date(time.dateTo);
// Push the from date and to date to the header array
dataObj.header.push(fromDate);
dataObj.header.push(toDate);
const rowObj = {
name: node.name,
id: node.id,
schedule_time: {},
}
time.schedule_day.forEach((day, index) => {
const newFromDate = new Date(fromDate);
const date = new Date(newFromDate.setDate(newFromDate.getDate() + index));
const dateStr = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;
// Save against the date string in the schedule_time object
rowObj.schedule_time[dateStr] = {
date,
time: `${day.startTime} - ${day.endTime}`,
id: day.id,
};
})
dataObj.values.push(rowObj);
});
})
// Generate unique date and sort it
dataObj.header = Array.from(new Set(dataObj.header)).sort((a,b) => new Date(b.date) - new Date(a.date));
// Fill the missing dates
dataObj.header = getDatesBetweenDates(new Date(dataObj.header[0]), new Date(dataObj.header[dataObj.header.length - 1]));
return dataObj;
}
}
})table,
th,
td {
border: 1px solid black;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<div id="app">
<div>
<div class="container">
<table>
<tr>
<td></td>
<td v-for="date in modifiedData.header" :key="date">
{{ date }}
</td>
</tr>
<tr v-for="value in modifiedData.values" :key="value.id">
<td>{{value.name}}</td>
<td v-for="day in modifiedData.header" :key="day.id">
<p v-if="value.schedule_time[day]">
{{value.schedule_time[day].time}}
</p>
<p v-else>
No Record
</p>
</td>
</tr>
</table>
</div>
</div>
</div>