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.

enter image description here

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 >
   <div >
      <label for="filterForMarkets" >Label</label>
   </div>
   <div >
      <select>
         <option *ngFor="let line of corporateLines">{{line.placelabel }}</option>
      </select>
   </div>
</div>

Thanks

CodePudding user response：

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,

        }
      }
    );

CodePudding user response：

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