Question

如何按Angular2中的hostname（link）和orderby date数据对数据数组进行分组。

我正在消耗一个用这个数组返回的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);
});

但是如何按主机名（链接）对此数组进行分组，可能使用分隔符来分隔每个组和orderby日期，另外可以在将数据传递到主（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="------"的空项

这是更新的Example Plunkr

groupby + orderby in ionic2 Angular2

1 个答案: