How to remove duplicate results after ngFor loop

Ionic Framework ionic-v3
1

Hey again. So i am getting JSON remotely and showing it inside ion-list via ngFor loop. The problem is that i am getting duplicates. How could i make results unique?
Here is the code from my HTML file:

<ion-header>
  <ion-navbar color="myDark">
    <ion-title>Ulice</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let item of dbData">
      <p (click)='showNames()'>{{item.ulica}}</p>
    </ion-item>
  </ion-list>
  <ion-fab bottom right>
    <button ion-fab (click)="filter()" color="myPrimary2">
      <ion-icon name="search"></ion-icon>
  </button>
  </ion-fab>
</ion-content>

Thanks in advance!

2

Make [quote=“daxdax89, post:1, topic:94636”]
dbData
[/quote]

unique before you use it in the ngFor and show it.

3

dbData will be downloaded locally and contain data for further operations of my app. I prefer having all this data in one local file more than having multiple files or remote calls which might make an app slower.

4

Then make a copy of it and make that unique.

5

Depending on the data structure, you might look into filling up a Set object and you’ll have unique values automatically. Otherwise, your use case demands a Pipe I think.

6

I strongly disagree with this. Stuff in templates gets called very many times, which is why there is no official Angular filter pipe.

7

Hm I see, yeah it might be an unreasonable burden on the view side. Then may be the data should come into the view already filtered somehow, so I think the OP should pre-process it. What would you suggest?

8

It actually was possible to do what you suggested in Angular 1, and a lot of people did. So you are in good company. But then people complained that Angular was slow, and it was because the pipe was “piping” every time the DOM was re-rendered, which happens a lot if change detection is on. So the Angular team removed that type of pipe from Angular 2, so programmers would not be tempted to do that anymore.

3 Likes
9

Here is some background on that: https://angular.io/guide/pipes#no-filter-pipe

1 Like
10

Thank you @AaronSterling and @Sujan12 for the nice info, I hope the OP can use a Set or otherwise pre-process the data somehow.

11

You can use ng-container

Do ngFor on ng-container and then ngIf isDupe() on the element

12

Dear @daxdax89, @KishuPro

I also have the same problem. I tried using ngContainer but still duplicate.
I don’t know how to use

ngIf isDupe()

my code is

<ng-container *ngFor="let item of param1;">
      <ion-label>Building ID: </ion-label> 
      <ion-item>{{item.numBuildingID}}</ion-item>
  </ng-container>

Please advise fast…

13

I don’ t know what you are trying to do. But here is an example:

HTML:

<ng-container *ngFor="let item of param1;">
     <ion-label  *ngIf="isDupe(item)">Building ID: </ion-label> 
     <ion-item *ngIf="isDupe(item)">{{item.numBuildingID}}</ion-item>
</ng-container>

TS:

isDupe(item){
   // do some logic to ensure that dupe is not displayed
   return true; // if dupe
}

As well if you want you can do a simple logic before displaying your param1 to filter the dupe. Like:

TS:

 this.http.get("http://server")
.subscribe(result => {
    var finalList = [];
    result.json().items.forEach(elem => {
       if(!finalList.find(param => elem.numBuildingID == param.numBuildingID )) {
          finalList.add(elem);
       } 
       this.param1 = finalList ;
   })
 })