Question

178

How go get *ngFor loop unique records

rated 0 times [ 181] [ 3] / answers: 1 / hits: 21094 / 7 Years ago, thu, april 20, 2017, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

cadendericki

Add To Favorites

Follow

Total Points: 482

Total Questions: 109

Total Answers: 103

Location: Ecuador

Member since Thu, Jun 4, 2020

4 Years ago

cadendericki questions

1 ERROR TypeError: Cannot read properties of undefined (reading 'phones')

Tue, Mar 22, 22, 00:00, 2 Years ago

1 firefox browser does not start in playwright

Wed, Apr 7, 21, 00:00, 3 Years ago

1 React Creating Dynamic Select and Option Elements with Material-UI

Wed, Jan 27, 21, 00:00, 3 Years ago

1 How to use the vue router in another file?

Wed, Jul 8, 20, 00:00, 4 Years ago

1 Format column header dates in FullCalendar

Thu, May 14, 20, 00:00, 4 Years ago

View All

answered 7 Years ago heidys · Accepted Answer

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