CODEWITHSUNDEEP
angular
Abid
Abid

Reputation: 127

why is not showing data in dropdown

I having an issue my data are not displayed my api also working fine but data are not displaying.

countries: {};

ngOnInit() {
    this.getCountry()
}

 <div class="form-group">
<select formControlName="country" class="form-control" (change)="onChangeCountry($event.target.value)">
  <option value="">Select country...</option>
  <option *ngFor="let country of countries" [value]="country.id">{{country?.data?.phonecode}}</option>
</select>

getCountry(){
    this._country.getCountries().subscribe((res: any) =>{
        this.countries = res.data;
        
    });
}

enter image description here

enter image description here

Upvotes: 1

Views: 442

Answers (2)

Wasim
Wasim

Reputation: 724

Your response data type is array according your JSON file and you are saving it in type {}.

You should change typescript

countries: any[] = [];

No need to put any in method , here it is updated code

getCountry(){
    this._country.getCountries().subscribe((res) =>{
        this.countries = res.data;
    });
}

And third point was about Phonecode . Now just do looping on countries array.

NOTE : In countries array we have now all countries , because we retrieved them from JSON using res.data

HTML

<select formControlName="country" class="form-control" (change)="onChangeCountry($event.target.value)">
  <option value="">Select country...</option>
  <option *ngFor="let country of countries" [value]="country.id">{{country.phonecode}}</option>
</select>

Upvotes: 1

NTP
NTP

Reputation: 4448

phonecode property is inside the country not country.data so change your select with the following

<select formControlName="country" class="form-control" (change)="onChangeCountry($event.target.value)">
  <option value="">Select country...</option>
  <option *ngFor="let country of countries" [value]="country.id">{{country.phonecode}}</option>
</select>

Upvotes: 2

Related Questions