时间戳

首页 > 解决方案 > Javascript / Moment - 按对象值分组数组

javascript - Javascript / Moment - 按对象值分组数组

问题描述

我想在 36 小时内创建一个包含天数和时间的二维数组。

我想要得到的输出是：

Wed 18th
  00:00am
  01:00am
  02:00am
  03:00am
  ...
  22:00pm
  23:00pm
Thur 19th
  00:00am
  01:00am
  02:00am
  03:00am
  ...

...直到我们达到 36 小时。我想为表单创建select一个optgroup。

基本上是当天的时间范围和第二天的时间范围给予或接受。

到目前为止，我有这个：

const start = moment().startOf('day');

const times = [];

let hours = 36 * 60;

for (let i = 0; i < hours; i += 1) {
    const value = moment(start).add(60 * i, 'minutes');

    const time = {
        value: value.format('HH:mm A'),
        label: value.format('ddd, Do, HH:mm A'),
        day: value.format('ddd, Do'),
    };

    times.push(time);
}

这给了我一系列日期和时间。

我试图按天值分组以实现上述输出，但无法实现。

这就是我到目前为止所拥有的——虽然它已经坏了。

let daysTimes = [];

times.forEach((time) => {
    daysTimes.push(time.day);
});

daysTimes = _.uniq(daysTimes);

times.forEach((time) => {
    if (daysTimes[time.day] === time.day) {
        daysTimes[time.day].push(time);
    }
});

console.log(daysTimes);

我的daysTimes阵列只有两天。没有时间。

我正在使用momentjs图书馆。

标签： javascriptarraysgroup-bymomentjs

解决方案

不使用平面数组，而是使用带有 day 的对象作为键和值的数组。然后迭代该对象以构建<select>

const start = moment().startOf('day');

const groups = {};// change to object

let hours = 36;

for (let i = 0; i < hours; i += 1) {
  const value = moment(start).add(60 * i, 'minutes');
  // get day for object key
  const day = value.format('MMM D');
  // add day property if it doesn't exist
  groups[day] = groups[day] || [];

  const time = {
    value: value.format('HH:mm A'),
    label: value.format('ddd, Do, HH:mm A'),
    day: value.format('ddd, Do'),
  };
  // push hour object to day array
  groups[day].push(time);
}

Object.entries(groups).forEach(day => {
  const optGroup = document.createElement('optgroup')
  optGroup.label = day[0];
  day[1].forEach(h => {
    optGroup.appendChild(new Option(h.label, h.value))
  })
  document.getElementById('sel').appendChild(optGroup)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<select id="sel"><option></option></select>

推荐阅读