how to bind data of api into ng-multiselect-dropdown? - html

Question

I want to bind data into a multi-select dropdown, how it is possible?
HTML code:
<div class="form-group">
<!--
<select class="form-control custom-selec" formControlName='stoppage_point'>
<option *ngFor="let cities of city.data" [(ngValue)]="cities.city">{{cities.city}}</option>
</select>
-->
<ng-multiselect-dropdown
name="city"
[placeholder]="'Select City'"
[data]="city.data"
formControlName="city"
[disabled]="disabled"
[settings]="dropdownSettings"
(onSelect)="onItemSelect($event)">
</ng-multiselect-dropdown>
</div>
.ts file code:
this.http.get(environment.api_url + `/admin/get_only_city/`
).subscribe((data:any[])=> {
console.log(data);
this.city = data;
var i;
for(i=0;i<=8;i++){
console.log(this.city.data[i]['_id']) ;
}
this.dropdownSettings = {
singleSelection: false,
selectAllText: 'Select All',
unSelectAllText: 'UnSelect All',
itemsShowLimit:5,
allowSearchFilter: true
};
});
I want to display all records in a dropdown, but it's not displaying values.
I don't how to bind a particular value in the data, so please can someone help me to solve this problem?

Answer 1

Please check my example Stackblitz
You call a webservice and fetch the result data into an array. And this array you push into your dropdownlist.
getData(): void {
let tmp = [];
this.http.get<any>('https://jsonplaceholder.typicode.com/users').subscribe(data => {
for(let i=0; i < data.length; i++) {
tmp.push({ item_id: i, item_text: data[i].name });
}
this.dropdownList = tmp;
});
}

Answer 2

Put return in this.dropdownList
getData(): void {
let tmp = [];
this.http.get<any>('https://jsonplaceholder.typicode.com/users').subscribe(data => {
for(let i=0; i < data.length; i++) {
tmp.push({ item_id: i, item_text: data[i].name });
}
return this.dropdownList = tmp;
});
}
console.log(this.dropdownList);