Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » Angular » Datos repetidos ngFor

Angular - Datos repetidos ngFor

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Violeta
Val: 2
Ha aumentado su posición en 38 puestos en Angular (en relación al último mes)
Gráfica de Angular

Datos repetidos ngFor

Publicado por Violeta (3 intervenciones) el 27/09/2023 14:58:48
Hola.

Estoy haciendo un searchbar con Ionic 6 que saca los datos de un Json y los planta en una lista; la cuestión es que me gustaría saber cómo hago para que no se me repitan estos datos.

Ya he intentado usar el "trackBy" pero no da resultado.

Os paso el código:

page.ts.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
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=>{
 
      this.showList1=false;
      this.showList3=false;
      this.showList2=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;
 
          for(let i=0; i<this.muni.length; i++){
 
          this.miType=this.muni[i].busquedatipo;
 
          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.label);
 
            })
 
            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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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">
          <h4 class="titLIst">Eventos</h4>
          <ion-item *ngFor="let mun of searchedMun" [routerLink]="['/ficha-evento',mun.code]" lines="none">
              <ion-label>{{mun.titulo}}</ion-label>
          </ion-item>
        </ion-list>
        <ion-list  *ngIf="showList1">
          <h4 class="titLIst">Provincias</h4>
          <ion-item *ngFor="let mun of searchedMun1" [routerLink]="['/provmun',mun.provincia,'provincia']" lines="none">
              <ion-label>{{mun.provincia}} <span class="diferenciar">Provincia</span></ion-label>
          </ion-item>
        </ion-list>
        <ion-list  *ngIf="showList2">
          <h4 class="titLIst">Municipios</h4>
          <ion-item *ngFor="let mun of searchedMun2" [routerLink]="['/provmun',mun.label,'municipio']" lines="none">
              <ion-label>{{mun.label}} <span class="diferenciar">Municipio</span></ion-label>
          </ion-item>
        </ion-list>
        <ion-list  *ngIf="showList3">
          <h4 class="titLIst">Lugares</h4>
          <ion-item *ngFor="let mun of searchedMun3" [routerLink]="['/ev-ubi',mun.id,mun.nombre]" lines="none">
              <ion-label>{{mun.nombre}}</ion-label>
          </ion-item>
        </ion-list>
      </ion-card-content>
    </ion-card>

Añadir que uso Angular 16.

Gracias por adelantado.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Violeta
Val: 2
Ha aumentado su posición en 38 puestos en Angular (en relación al último mes)
Gráfica de Angular

Datos repetidos ngFor

Publicado por Violeta (3 intervenciones) el 28/09/2023 09:24:43
En principio he conseguido resolverlo gracias a este aporte:

https://stackoverflow.com/questions/51741910/how-to-remove-duplicates-from-an-object-array-using-spread-operator

Sería:

1
2
3
4
5
6
7
8
9
10
11
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;
          }

Y luego desde el HTML llamo a "test" en vez de "searchedMun" en el ngFor:

1
2
3
4
5
6
<ion-list  *ngIf="showList1">
      <h4 class="titLIst">Provincias</h4>
      <ion-item *ngFor="let mun of test" [routerLink]="['/provmun',mun.provincia,'provincia']" lines="none">
          <ion-label>{{mun.provincia}} <span class="diferenciar">Provincia</span></ion-label>
      </ion-item>
 </ion-list>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar