groupby + orderby in ionic2 Angular2

Question

如何在 Angular2 中按主机名（链接）和按日期数据排序对数据数组进行分组。

我正在使用一个与此数组一起返回的 API

this.items = [
    {name: "bana", link: "https://wiki.com/what-ever/mmmmmmmmm/mdmdm", date: "Sat, 28 Jan 2017 11:45:52 +0000"},
    {name: "orange", link: "http://google.com/what-ever/mmmmmmmmm/mdmdm", date: "Sat, 28 Jan 2017 05:39:32 +0000"},
    {name: "apple", link: "https://ask.com/what-ever/mmmmmmmmm/mdmdm", date: "Sat, 28 Jan 2017 03:38:47 +0000"},
    {name: "pear", link: "http://duckduckgo.com/what-ever/mmmmmmmmm/mdmdm", date: "Sat, 28 Jan 2017 02:20:15 +0000"},
    {name: "ora", link: "http://google.com/what-ever/nnnnnnnnnnnnnnnn", date: "Sat, 28 Jan 2017 02:00:23 +0000"},
    {name: "grape", link: "http://www.isearch.com/what-ever/mmmmmmmmm", date: "Sat, 28 Jan 2017 01:20:43 +0000"},
    {name: "ap", link: "https://ask.com/what-ever/mvvvvvvvvvvvvvvv", date: "Fri, 27 Jan 2017 21:53:51 +0000"},
    {name: "banana", link: "https://wiki.com/what-ever/mmmmmmmmm/mdmdm", date: "Fri, 27 Jan 2017 16:36:51 +0000"},
    {name: "pe", link: "http://duckduckgo.com/what-ever/nnnnnnnnnnn", date: "Fri, 27 Jan 2017 11:47:52 +0000"},
];

如何按主机名（链接）和按日期排序此数组

parser.href = "http://example.com:3000/pathname/?search=test#hash";
parser.protocol; // => "http:"
parser.hostname; // => "example.com"
parser.port;     // => "3000"
parser.pathname; // => "/pathname/"
parser.search;   // => "?search=test"
parser.hash;     // => "#hash"
parser.host;     // => "example.com:3000"

这是我如何获得主机名的

this.items.map((item) => {
   let wordCount = item.link.split("/");
   let result = wordCount[0] + "//" + wordCount[2];
   console.log("hostname", result);
}); 

但是我如何按主机名（链接）对这个数组进行分组，可能使用分隔符来分隔每个组和按日期排序，以及是否可以在将数据传递到 main（html） 页面之前完成此操作。

帮助！！！

Answer 1

您可以使用

orderByPipe 来过滤日期，就像这里回答的那样：https://stackoverflow.com/a/35158836/1471485

（与上面的答案相同，但有一些修改）：

import { Pipe } from "angular2/core";
@Pipe({
  name: 'sort-by-date'
})
export class SortByDatePipe implements PipeTransform {
  transform(groupedItems: any, date: any): any {
    groupedItems.sort((a: any, b: any) => {
      if (a[date] < b[date]) {
        return -1;
      } else if (a[date] > b[date]) {
        return 1;
      } else {
        return 0;
      }
    });
    return groupedItems;
  }
}

然后，对于您的分组，您可以使用当前的方法：

createHostNameMap(){
    this.hostnamesMap={} // hostname as key, and an array of items as value
    this.items.map((item) => {
       let wordCount = item.link.split("/");
       let result = wordCount[0] + "//" + wordCount[2];
       if(!this.hostnamesMap[result]){ // create an entry of not existing
         this.hostnamesMap[result] = [item];
       }else{ // add item to already existing entry
         this.hostnamesMap[result].push(item);
       }
    }); 
}

使用此方法，您应该得到如下所示的内容：

this.hostnamesMap = 
 {
  "wiki.com":[
   {name: "bana", link: "https:///what-ever/mmmmmmmmm/mdmdm", date: "Sat, 28 Jan 2017 11:45:52 +0000"},
   {name: "banana", link: "https://wiki.com/what-ever/mmmmmmmmm/mdmdm", date: "Fri, 27 Jan 2017 16:36:51 +0000"},
   {.....}],
  "google.com":[{},{}]
 }

然后，您可以使用 SortByDatePipe 筛选其中每个组。

    for(var key in this.hostnamesMap){
      if(this.hostnamesMap[key] && this.hostnamesMap[key].length>0){
       //TODO do something with your filtered arrays
       console.log(this.sortByDateFilter.transform(this.hostnamesMap[key],"date"));
      }
    }

编辑：从评论中，OP还想知道如何在html中显示内容。我将分组和 orderByDate 后的所有项目推送到一个名为 flteredItems 的单独列表中，并使用当前代码将它们打印在 html 中。

  <div *ngFor="let item of filteredItems">
    {{item.name}}
  </div>

编辑：OP还希望在组之间有线......简单而愚蠢的方法是在每个组后添加一个带有name="------"的空项目

这是一个更新的示例 Plunkr