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