從 api json 返回的 VueJs 特殊渲染

Question

我有以下 API 數據：

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

這是從數據庫中提取的。 但是，數據庫會根據過去的時間清除約會。 例如，如果當前是下午 1 點，則在此之前的所有約會都會被清除。 如果time > = 不渲染它的日期，我需要找到一種方法來有條件地渲染。

這是我的模板：

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

我的 axios：

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

Answer 1

您可以使用Date.parse()從appointment對象中解析日期和時間，可以使用Object.entries()和Object.keys()進行迭代，如下所示：

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

用法是這樣的：

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
//      }
//    }

演示