How to display view in vue js based on object data?

Question

I have a problem with javascript. I have data as contained in variable datas. I want to display data from the data variable in a table form as below.

the meaning of etc is the date of the dateTo field in the data object. To be clear, the dateFrom and dateTo fields, which are originally date ranges, will be outputted into a date array starting from the date in dateFrom to the date in dateTo. For the date format to be used is new Date(). What I'm thinking is the possibility of using computed or method to get the contents for arrayDates based on dateFrom and dateTo. The overview of output for the date array is something like this:

arrayDates:["2022-01-24", "2022-01-25", "2022-01-26", ... "2022-02-28"].

Does anyone understand the case I have? Thanks.

<script>
export default {
    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"},
                          ]
                        }
                    ]
                },
            ],
        }
    },

    methods: {
        
    },

}

Answer 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>