Question

如果我有一个JSON数组看起来像他跟随..

{
"error":false,
"events":[
  {
     "id":1,
     "title":"First entry",
     "date":"2014-11-04"
  },
  {
     "id":2,
     "title":"Second entry",
     "date":"2014-11-04"
  },
  {
     "id":3,
     "title":"Third entry",
     "date":"2014-11-05"
  },
  {
     "id":4,
     "title":"Fourth entry",
     "date":"2014-11-06"
  },
  {
     "id":5,
     "title":"Fifth entry",
     "date":"2014-11-06"
  }
 ]
}

如何在重复中创建日期分隔符，以便DOM看起来像这样......

2014-11-04
首次入职第二次入职

2014年11月5日
第三次入职

2014年11月6日
第四次入职第五次入境

Answer 1

我只想将数据分组到数组中。

@bindable events = [];
groupedEvents = [];

eventsChanged(newValue) {
  let matchedGroup;
  // clear the array
  this.groupedEvents = this.groupedEvents.splice(0, this.groupedEvents.length)
  newValue.forEach(event => {
    let match = this.groupedEvents.filter(group => {
      return group.name === event.date;
    })[0];
    if (!match) {
      matchedGroup = { name: event.date, events: [] };
      this.groupedEvents.push(matchedGroup);      
    }
    matchedGroup.events.push(event);
  });
}

在您的视图中，您可以遍历群组 -

<template repeat.for="group of groupedEvents">
  <h1>${group.name}</h1>
  <ul>
    <li repeat.for="event of group.events">${title}</li>
  </ul>
</template>

JavaScript分组主要是普通的ES6 +代码，可能效率更高，但它应该会给你一个开始。

在Aurelia创建分隔符

1 个答案: