Angular2 Grouping Pipe

Question

I am trying to create a custom pipe for displaying data in my angular component and couldn't succeed for some reason. Can someone help me create this custom pipe to display the tickets in the following format? Here is my plunker.

 SEARCH
 Ticket Id    Ticket Type   status
 12345        chat          closed
 62363        phone         open
 48768        phone         open

 DISPUTE
 Ticket Id    Ticket Type   status
 79439        web           closed
 67797        phone         open

Where exactly you couldn't succeed for some reason? What's the reason? — Roman C, Nov 30 '16 at 20:52
Sorry, I created a plnk without my crappy code. I was trying to follow http://stackoverflow.com/questions/37248580/how-to-group-data-in-angular-2 and every time this is what I end up with. TypeError: Cannot read property 'reduce' of undefined — RKG, Nov 30 '16 at 21:01

RKG · Answer 1 · 2016-11-30T21:59:54.247

I finally got my first custom pipe working. Thanks to http://www.morphatic.com/2016/06/23/creating-a-filter-pipe-for-angular-2-in-ionic-2/. I've updated the plunker in case if anyone is interested in the solution. Since I'm new to pipes in Angular2, I'm open to suggestions to modify/simplify my solution.

@Pipe({
  name: 'ticketsGrouping',
  pure: false
})

export class TicketsGrouping implements PipeTransform {

  transform(items: Array<any>, conditions: {[field: string]: any}): Array<any> {
    if (items !== undefined) {
      return items.filter(item => {
        for (let field in conditions) {
          if (item[field] !== conditions[field]) {
            return false;
          }
        }
        return true;
      });
    }
  }
}

You could also use `ng-pipes` module: https://github.com/danrevah/ng-pipes#groupby — D_R, Dec 24 '16 at 17:10

Angular2 Grouping Pipe

1 Answers1