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

Question

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

as long as you dont need to get all the records in this method and just the label you could add distinct to the pipe() by the field you need. if you do need to get all the records I would suggest to add external array to hold the dropdown fields only and iterate of that. — dAxx_, Mar 31 '22 at 15:02

score 0 · Answer 1 · answered Mar 31 '22 at 15:49

Considering that all your data is contained in "TITRE" : [...] which is actually an array, you could use the solution from Delete duplicate elements from an array, which uses the filter function to return an array containing only unique elements.

For example, in your case you could do something like this :

var unique = res.TITRE.filter(function(elem, index, self) {
    return index === self.indexOf(elem);
})
this.corporateLines = unique.map(
      corporateLine => {
        return {
          placelabel: corporateLine.PLACELABEL,

        }
      }
    );

score 0 · Accepted Answer · answered Mar 31 '22 at 20:04

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

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

2 Answers2