Question

我正在尝试先按停留时间分类事件列表，然后按时间分类。我可以得到其中的一层，但我只能坚持第二层。

最后，它应该看起来像这样：

星期五
  8:00-事件1，事件2，等等...
  9:00-事件1，事件2，等等...
  …

星期六
  8:00-事件1，事件2，等等...
  9:00-事件1，事件2，等等...
  …

到目前为止，这是我的代码，它为我提供了每日级别的分组。我对此非常陌生，因此，如果有一个明显更好的方法，我很乐于探索。

这里是CodePen version。这是天分组，而不是时间分组。

我尝试了几件事。我知道我可能需要做一些与日期操作类似的事情，但是我不确定如何创建，遍历和显示尚不存在的数组。

<div id="vue">
  <div v-for="events, day in groupedDays" class="day">
    <h2>{{ day == today ? 'Today' : day }}</h2>
    <div v-for="event, time in events">
      {{ event.date.toLocaleTimeString() }} - {{ event.title }}
    </div>
  </div>
</div>

function groupBy(array, fn) {
  let result = {};
  array.forEach(item => {
    let key = fn(item);

    if (!result[key]) {
      result[key] = [];
    }
    result[key].push(item);
  });
  return result;
}

let conferenceDays = [];

for (let [key, session] of Object.entries(sessions)) {
  // console.log(session.Start);
  conferenceDays.push({
    date: new Date(session.Start),
    title: session.Title
  });
}

new Vue({
  el: "#vue",
  data() {
    return {
      conferenceDays,
      today: new Date().toDateString()
    };
  },
  computed: {
    groupedDays() {
      return groupBy(this.conferenceDays, day => day.date.toDateString());
    }
  }
});

我知道有人会非常有帮助地将其标记为某些模糊相似问题的重复，因此请知道我已进行了广泛搜索，并且没有找到 two < / em>分组级别。同样，如果我以一种不好的方式来解决这个问题，我也会接受不同的解决方案。

Answer 1

可能的解决方法如下：

在groupBy函数中，首先按升序对数组进行排序，然后每天将其转换为键和值的对象 strong>分别是在该时间开始的开始时间和会议。

function groupBy(array) {
  return array 
    .sort((c1, c2) => c1.date.getTime() - c2.date.getTime())
    .reduce((acc, crt) => {
    const k = crt.date.toDateString();
    const hr = crt.date.toLocaleTimeString();

    if (!acc[k]) {
      acc[k] = {};
    }

    acc[k][hr] = acc[k][hr] || [];
    acc[k][hr].push(crt.title);

    return acc;
  }, {})
}

结果，您的html如下所示：

<div v-for="events, day in groupedDays" class="day">
    <h2>{{ day == today ? 'Today' : day }}</h2>
    <div v-for="conferences, time in events">
      {{ time }} - {{ conferences.join(', ') }}
    </div>
  </div>

Here's the CodePen。

Answer 2

对于您建议的数据整理，您需要分三步进行：

^{我将使用lodash作为我选择的数据管道库，您不必使用它}

每天将所有会议分组（已实现）

function groupAllConferencesByDay(all) {
    return _(all)
           .groupBy(conference => conference.date.toDateString())
           .mapValues(groupDaysConferencesByTime) // <---
           .value()
}

每天将这几天的会议按其时段分组

function groupDaysConferencesByTime(day) {
    return _(day)
           .groupBy(conference=>conference.date.toLocaleTimeString())
           .mapValues(concatTitleOfSimultaniousConferences)
           .value()
}

为每个时隙获取会议标题并以逗号加入

function concatTitleOfSimultaniousConferences(timeslot) {
  return _.map(timeslot, conference => conference.title )
          .join(", ")
         // dont need .value() here as we are using _.map(X, Y)
         // as opposite to _(X).map(Y)
}

然后您可以像这样向用户展示数据

<div id="vue">
  <div v-for="events, day in groupedDays" class="day">
    <h2>{{ day == today ? 'Today' : day }}</h2>
    <div v-for="conferences, time in events">
      {{ time }} - {{ conferences }}
    </div>
  </div>
</div>

pen here

Vue：按日期分组数据，然后按时间分组

2 个答案: