Me gustaría crear una lista desplegable y recuperar los elementos de un servicio web.
Mi problema es que me gustaría evitar mostrar elementos duplicados porque tengo 9999 elementos.
Aquí está el archivo JSON .
ingrese la descripción de la imagen aquí
¿Crees que es posible hacer esto? Porque, no tengo idea de cómo programar esto?
El método de visualización es este:
private getDropDownList(): void { this.service.getDropDownList().pipe( takeUntil(this.unsubscribe$) ).subscribe(res => { if (res.RETURNCODE === ApiResponseCodeEnum.Ok) { this.corporateLines = res.TITRE.map( corporateLine => { return { placelabel: corporateLine.PLACELABEL, } } ); } }); }componente.corporativo.ts
export class CorporateComponent implements OnInit, OnDestroy { private unsubscribe$ = new Subject<void>(); corporateLines: Corporate[] = []; constructor(private service: CorporateService, private router: Router) { } ngOnInit(): void { this.getDropDownList(); } ngOnDestroy(): void { this.unsubscribe$.next(); this.unsubscribe$.complete(); } private getDropDownList(): void { this.service.getDropDownList().pipe( takeUntil(this.unsubscribe$) ).subscribe(res => { if (res.RETURNCODE === ApiResponseCodeEnum.Ok) { this.corporateLines = res.TITRE.map( corporateLine => { return { placelabel: corporateLine.PLACELABEL, } } ); } }); } }respuesta.corporativa.ts
import { ApiResponse } from "src/shared/types/api.response"; export interface CorporateResponse extends ApiResponse { TITRE: { PLACELABEL: string; }[]; }corporativo.ts
export interface Corporate { placelabel: string; }componente.corporativo.html
<div class="row row-cols-3 pt-3"> <div class="col text-end"> <label for="filterForMarkets" class="form-label">Label</label> </div> <div class="col-4"> <select> <option *ngFor="let line of corporateLines">{{line.placelabel }}</option> </select> </div> </div>Gracias
Teniendo en cuenta que todos sus datos están contenidos en "TITRE" : [...] que en realidad es una matriz, podría usar la solución de Eliminar elementos duplicados de una matriz , que usa la función de filtro para devolver una matriz que contiene solo elementos únicos.
Por ejemplo, en tu caso podrías hacer algo como esto:
var unique = res.TITRE.filter(function(elem, index, self) { return index === self.indexOf(elem); }) this.corporateLines = unique.map( corporateLine => { return { placelabel: corporateLine.PLACELABEL, } } );Creo que podrías usar el operador distinto así:
private getDropDownList(): void { this.service.getDropDownList().pipe(distinct(), takeUntil(this.unsubscribe$) ).subscribe(res => { if (res.RETURNCODE === ApiResponseCodeEnum.Ok) { this.corporateLines = res.TITRE.map( corporateLine => { return { placelabel: corporateLine.PLACELABEL, } } ); } }); }