Monomoni
Monomoni

Reputation: 435

Displaying array as select options from TS

I've imported a json file and created a function as such in my ts

constructor(...) {

  this.getCountry().subscribe(data => {
    this.countries = [data];
    console.log(this.countries);
  });
}
...

getCountry(): Observable<any> {
  return this.http.get("../../../../assets/json/sys_country.json");
}

this.countries displayed the array stored in my json file perfectly well but when called upon in html as a dropdown select it wasn't showing anything.

this was how i have set my html

<mat-form-field>
  <mat-select placeholder="Country" formControlName="country">
    <mat-option *ngFor="let country of countries" [value]="country.name">
      {{country.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

and here is how the json file look like

[
  {
    "name": "Afghanistan",
    "topLevelDomain": [
      ".af"
    ],
    "alpha2Code": "AF",
    "alpha3Code": "AFG",
    "callingCodes": [
      "93"
    ],
    "capital": "Kabul",
    "altSpellings": [
      "AF",
      "Afġānistān"
    ],
    "region": "Asia",
    "subregion": "Southern Asia",
    "population": 27657145,
    "latlng": [
      33.0,
      65.0
    ],
    "demonym": "Afghan",
    "area": 652230.0,
    "gini": 27.8,
    "timezones": [
      "UTC+04:30"
    ],
    "borders": [
      "IRN",
      "PAK",
      "TKM",
      "UZB",
      "TJK",
      "CHN"
    ],
...

which i have extracted from https://jsonblob.com/a11e0a0a-d4ff-11e9-9035-fd9e94f77336

but in the display the select dropdowns to show nothing.

Upvotes: 0

Views: 54

Answers (2)

nabilinfo
nabilinfo

Reputation: 49

You have already get an array from your json file. change this line : this.countries = [data]; to this.countries = data;

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222572

You are already getting an array from the request, just change your code as,

 this.getCountry().subscribe(data => {
    this.countries = data;
    console.log(this.countries);
  });

Upvotes: 1

Related Questions