映射数组中的对象并在满足条件时显示日期

Question

var data = [
{
	from: "2017-04-21T12:00:00",
	to: "2017-04-22T18:00:00",
	period: "2"
},
{
	from: "2017-04-21T18:00:00",
	to: "2017-04-22T00:00:00",
	period: "3"
},
{
	from: "2017-04-22T00:00:00",
	to: "2017-04-22T06:00:00",
	period: "0"
},
{
	from: "2017-04-22T06:00:00",
	to: "2017-04-22T12:00:00",
	period: "1"
}];

<div data-day="today">
  <p>Today</p>
  <li>12:00 - 18:00: rain</li>
  <li>18:00 - 00:00: clouds</li>
</div>

<div data-day="2017-04-22">
  <p>22. april 2017</p>
  <li>00:00 - 06:00: sun</li>
  <li>06:00 - 12:00: snow</li>
</div>

我从气象服务获取数据，每天分为四个时段：0, 1, 2, 4。

句点为0 的每个对象都是新一天的开始。为此，我想以日期格式 DD. MM. YYYY HH:MM 显示日期字段 from

对于句点不是0的对象，我只需要以时间格式显示from：HH:MM。我正在使用 Momentjs 来解析日期，但需要输入如何每天分组。

映射对象是要走的路吗，或者有人对如何实现这一点有什么好的建议吗？

第一个对象将始终是当前期间，因此可能会有所不同。

{
    from: "2017-04-21T12:00:00",
    to: "2017-04-22T18:00:00",
    period: "2",
    forecast: "rain"
},
{
    from: "2017-04-21T18:00:00",
    to: "2017-04-22T00:00:00",
    period: "3",
    forecast: "clouds"
},
{
    from: "2017-04-22T00:00:00",
    to: "2017-04-22T06:00:00",
    period: "0",
    forecast: "sun"
},
{
    from: "2017-04-22T06:00:00",
    to: "2017-04-22T12:00:00",
    period: "1",
    forecast: "snow"
},
etc...

为此，我想为每一天输出一个新的 div。在第一个 period=0 之前的第一个对象可能具有数据日“今天”。有人能指出我正确的方向吗？

<div data-day="today">
   <p>Today</p>
   <li>12:00 - 18:00: rain</li>
   <li>18:00 - 00:00: clouds</li>
</div>

<div data-day="2017-04-22">
   <p>22. april 2017</p>
   <li>00:00 - 06:00: sun</li>
   <li>06:00 - 12:00: snow</li>
</div>

Answer 1

你可以使用 jQuery：

var firstitem = $.grep(allitems, item => (item.period ==0))[0]