Repeated data in a ngFor loop Angular 16

Question

I have an ngFor loop with repeated data in a ionic 6 searchbar. I have prove "trackBy" and "map" already.

I know that there is the same subject in this web, but is from 2020 and maybe there is some way new.

¿Anyone knows another way?

Thank you.

page.ts:

 handleInput(event) {
  
    this.text= event.target.value;

    let body= new FormData();
    body.append('busqueda', this.text)
    
    this.http.post(this._ABSPATH_+'/app/complexsearch/', body).subscribe(res=>{

      // Dado que es un proceso cíclico, hay que volver a poner toto a 0
      this.showList4=false;
      this.showList1=false;
      this.showList3=false;
      this.showList2=false;
      this.showList5=false;

      this.muni=res;  
     
       
        if(this.text && this.text.trim != null){
          this.show=true;
        
          this.searchedMun= this.muni;
          this.searchedMun1= this.muni;
          this.searchedMun2= this.muni;
          this.searchedMun3= this.muni;
          this.searchedMun4= this.muni;
          
          for(let i=0; i<this.muni.length; i++){
  
          this.miType=this.muni[i].busquedatipo;
          let miTit=this.muni[i].titulo;
       

          if(this.miType=='evento'){
            this.searchedMun= this.searchedMun.filter((muni:any)=>{
          
              return (muni.titulo);       
            })
            this.showList=true;
          }
          if(this.miType=='provincia'){
            this.searchedMun1= this.searchedMun1.filter((muni:any)=>{
              return (muni.provincia);       
            }) 
            
            this.showList1=true;
          }
          if(this.miType=='municipio'){
            this.searchedMun2= this.searchedMun2.filter((muni:any)=>{
              return (muni.municipio);  
                  
            }) 
            
            this.showList2=true; 
          }
          if(this.miType=='ubicacion'){
            this.searchedMun3= this.searchedMun3.filter((muni:any)=>{
              return (muni.nombre);                    
            }) 
            
            this.showList3=true; 
          }

        }
      }
    })// Fin petición POST
   
  } 

page.html:

 <ion-searchbar value="" show-clear-button="focus" placeholder="Buscar evento, categoría o localización" color="light" search-icon="search-sharp"  [debounce]="300" 
      (ionInput)="handleInput($event)" (ionClear)="cancel()"></ion-searchbar>

    <ion-card id="listSearch" *ngIf="show">
      <ion-card-content>
        <ion-list *ngIf="showList">
          <ion-label>Eventos</ion-label>
          <ion-item *ngFor="let mun of searchedMun" [routerLink]="['/ficha-evento',mun.code]">            
              <ion-label>{{mun.titulo}}</ion-label>                
          </ion-item>
        </ion-list>
        <ion-list  *ngIf="showList1">
          <ion-label>Provincia</ion-label>
          <ion-item *ngFor="let mun of searchedMun1" [routerLink]="['/reel2',mun.provincia,'provincia']">            
              <ion-label>{{mun.provincia}} <span class="diferenciar">Provincia</span></ion-label>                
          </ion-item>
        </ion-list>
        <ion-list  *ngIf="showList2">
          <ion-label>Municipios</ion-label>
          <ion-item *ngFor="let mun of searchedMun2" [routerLink]="['/reel2',mun.municipio,'municipio']">            
              <ion-label>{{mun.municipio}} <span class="diferenciar">Municipio</span></ion-label>                
          </ion-item>
        </ion-list>
        <ion-list  *ngIf="showList3">
          <ion-label>Lugares</ion-label>
          <ion-item *ngFor="let mun of searchedMun3" [routerLink]="['/reel2',mun.municipio,'municipio']">            
              <ion-label>{{mun.nombre}} <span class="diferenciar">Municipio</span></ion-label>                
          </ion-item>
        </ion-list>
      </ion-card-content>
    </ion-card>

Each element have a diferent index, so "trackBy: index doesn't" work.

Answer 1

Finaly I've solved the issue with another filter method, as in this post:

How to remove duplicates from an object array using spread operator.

In my code is:

 if(this.miType=='provincia'){
            this.searchedMun1= this.searchedMun1.filter((muni:any)=>{
              return (muni.provincia);       
            }) 
            
            this.test=[
              ...new Map(this.searchedMun1.map(item=>[item.provincia,item])).values()
            ]

            this.showList1=true;
          }

And later in the *ngFor, I call to "test" instead of "searchedMuni".