How to avoid duplicate items in a drop down list to display?

I would like to create a drop-down list and retrieve the elements from a webService.

My problem is that I would like to avoid displaying duplicate items because I have 9999 items.

Here is the JSON file.

Do you think it is possible to do this? Because, I have no idea how to program this?

The display method is this:

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,
            }
          }
        );
      }
    });
  }

corporate.component.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,
    
            }
          }
        );
      }
    });
  }

}

corporate.response.ts

import { ApiResponse } from "src/shared/types/api.response";

export interface CorporateResponse extends ApiResponse {
    TITRE: {
        PLACELABEL: string;
    }[];
}

corporate.ts

export interface Corporate {
    placelabel: string;
}

corporate.component.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>

Thanks

Answer

I think you could use the distinct operator like this:

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,
            }
          }
        );
      }
    });
  }

Advertisement

Answer