0

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.

enter image description here

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: {
        
    },

}
Improve this question

1 Answer 1

Reset to default
2

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

the date is still misunderstood, the arrayDates is not manually filled in, but the contents of arrayDate are obtained from looping the dateFrom and dateTo fields in schedule_time
Is the dateFrom and dateTo are same for all nodes?
it is possible that later there will be several user cases that are not the same in the dateFrom section, if for the dateTo section, the end date will probably be the same because it will be set per month. do you have a solution to solve this problem?
perhaps instead of referencing 'datas' you could reference a computed function so you can format the data as needed in that function without having to adjust any v-for logic you have throughout the view. vuejs.org/v2/guide/computed.html
you're right, this can use computed, but I still don't really understand how to use it in my case.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.