5

How to get unique records from this array. I need to get unique {{ subitem.author }} from this array of items.

<div *ngFor="let item of items">   
    <ion-list *ngFor="let subitem of item.items" (click)="authorquotes(subitem.author);">
        <ion-item >
            {{ subitem.author }} 
        </ion-item>
    </ion-list>
</div>

In array having multiple records. From that array, I need to filter unique authors.

Hristo Eftimov
  • 13,845
  • 13
  • 50
  • 77
Ayyan
  • 71
  • 1
  • 2
  • 9
  • you mean unique records? – Suraj Rao Apr 20 '17 at 07:08
  • Create a list of unique items in your controller, and loop over that. –  Apr 20 '17 at 07:09
  • `*ngFor` can't help you here. You can create a pipe that filters duplicates, or you can use a list in `*ngFor` that already has the duplicates filtered. – Günter Zöchbauer Apr 20 '17 at 07:10
  • http://stackoverflow.com/questions/11246758/how-to-get-unique-values-in-an-array – Suraj Rao Apr 20 '17 at 07:10
  • @GünterZöchbauer Using pipes for such things is generally frowned on. –  Apr 20 '17 at 07:11
  • @torazaburo any arguments about why? – Günter Zöchbauer Apr 20 '17 at 07:12
  • It could be executed over and over again as Angular checks for changes. –  Apr 20 '17 at 07:13
  • 1
    That doesn't sound like a good argument. Angular executes it only when the value changes (different array instance). If you make the pipe impure, you can still cache the result and returned cached result as long as the parameters or input values haven't changed. That doesn't seem worse than other approaches. – Günter Zöchbauer Apr 20 '17 at 07:22
  • You could do ` subitem.author === item.author) === index", after adding an `i as index` to the `*ngFor`. –  Apr 20 '17 at 07:23
  • @GünterZöchbauer See https://angular.io/docs/ts/latest/guide/pipes.html#!#no-filter-pipe. –  Apr 20 '17 at 07:24
  • @torazaburo I remember reading that. It mostly sounds to me like there are cases where generic filter pipes can perform poorly and we don't want to get blamed for that. Creating your own filter pipe is easy enough for you to do it yourself if you think you need one. There are of course also valid points like minification. But pipes have the advantage that they make it easy to make code reusable. There is also "If these performance and minification considerations don't apply to you, you can always create your own such pipes (similar to the FlyingHeroesPipe) or find them in the community." – Günter Zöchbauer Apr 20 '17 at 07:29
  • @torazaburo ... and thanks for the link. – Günter Zöchbauer Apr 20 '17 at 07:29

1 Answers1

14

You have to create a pipe that filters the array with unique items:

@Pipe({
  name: 'filterUnique',
  pure: false
})
export class FilterPipe implements PipeTransform {

  transform(value: any, args?: any): any {

    // Remove the duplicate elements
    let uniqueArray = value.filter(function (el, index, array) { 
      return array.indexOf (el) == index;
    });

    return uniqueArray;
  }
}

Then you can apply your pipe:

<div *ngFor="let item of items | filterUnique">   
    <ion-list *ngFor="let subitem of item.items" (click)="authorquotes(subitem.author);">
        <ion-item >
            {{ subitem.author }} 
        </ion-item>
    </ion-list>
</div>

Working demo: https://plnkr.co/edit/yxvoKVD3Nvgz0T3AB7w3?p=preview

Hristo Eftimov
  • 13,845
  • 13
  • 50
  • 77