VueJs special rending from api json return

Question

I have the following API data:

{
  "data": {
    "City": {
      "zip": "75000",
      "appointment": {
        "2020-10-12": {
          "08:00:00": 3,
          "09:15:00": 3,
          "10:30:00": 3,
          "11:45:00": 3,
          "13:00:00": 3,
          "14:15:00": 3,
          "15:30:00": 3
        },
      }
    }
  }
}

This is pulled from a database. However, the database purges appointments based on past time. For example, if it's currently 1pm, any appointments before that get purged. I need to find a way to to conditionally render if time >= the dates to not render it.

Here is my template:

<template v-for="(arrAppointmentData, strDate) in arrData['appointment']">
  <td :key="strDate" class="text-center ma-5 pa-5">
    <template v-if="typeof(arrAppointmentData) == 'object' &&  strDate > arrAvailableDates ">
      <span class="time-slot-x-small" v-for='(intCount, intIndex) in arrAppointmentData' :key="intIndex" v-if="intCount !== 0">
        {{ $moment(intIndex, ["HH:mm:ss"]).format('hh:mma')}}  <v-badge inline color="green" v-bind:content="intCount" > </v-badge>
      </span>
    </template>
    <template v-else>
      None
    </template>
  </td>
</template>

My axios:

this.arrAvailableDates    = objResponse.data.dates;
this.arrAppointmentsData  = objResponse.data.data;

Answer 1

You could use Date.parse() to parse the dates and times from the appointment object, which can be iterated with Object.entries() and Object.keys() as shown below:

function availableAppointments(appts, expiry) {
  return Object.entries(appts)
              .reduce((prev, [date, times]) => {
                if (times) {
                  times = Object.keys(times)
                    .filter((time) => Date.parse(`${date}T${time}`) >= expiry)
                    .reduce((p, c) => {
                      p[c] = times[c]
                      return p
                    }, {})
                }

                prev[date] = times
                return prev
              }, {})
}

Usage would be something like this:

const appts = availableAppointments(sampleData.data.City.appointment, Date.now())
// => {
//      "2020-10-12": {},
//      "2020-10-14": {
//        "14:15:00": 3,
//        "15:30:00": 3
//      },
//      "2020-10-22": {
//        "08:00:00": 3,
//        "09:15:00": 3,
//        "10:30:00": 3,
//        "11:45:00": 3,
//        "13:00:00": 3,
//        "14:15:00": 3,
//        "15:30:00": 3
//      }
//    }

demo