groupby + orderby in ionic2 Angular2

Question

how can i group an array of data by hostname(link) and orderby date data in Angular2.

i'm consuming an api which return with this array

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"},
];

how do i group this array by hostname(link) and orderby date

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"

here is how i got my hostname

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

but how do i group this array by hostname(link), probably using a divider to separate each group and orderby date, plus is it possible to have this done before passing the data to the main(html) page.

help!!!

You could create your own filter that orders by date, and group by hostname, using the code you have provided. — John, Jan 30 '17 at 09:02

score 1 · Accepted Answer · edited May 23 '17 at 11:54

You can use an orderByPipe to filter dates, like the one answered here: https://stackoverflow.com/a/35158836/1471485

(same as answer above, with some modifications):

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;
  }
}

Then, for your grouping, you can use your current method:

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);
       }
    }); 
}

With this method, you should get something like this:

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":[{},{}]
 }

You can then filter each of those groups using the 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"));
      }
    }

EDIT: From the comments, the OP also wanted to know how to display the content in html. I pushed all items after grouping and orderByDate into a seperate list called flteredItems, and used the current code to print them in the html.

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

EDIT: the OP also wanted to have lines between the groups...... simple and stupid method of doing it, is to add an empty item with name="------" after each group

Here is an updated Example Plunkr

@netx I updated the plunkr to display the items on the html-page — John, Jan 30 '17 at 11:34
thanks, one last thing... help me add divider between each group.. thanks — netx, Jan 30 '17 at 12:01
I added the lines as well. However, your question has become more of a task, rather than a simple question. I advice you to separate your task into smaller chunks of problems, trying to solve each of them, and then ask questions if you are not able to solve them. Hope this helps though. — John, Jan 30 '17 at 12:14

groupby + orderby in ionic2 Angular2

1 Answers1