Reputation: 435
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
Reputation: 49
You have already get an array from your json file. change this line : this.countries = [data]; to this.countries = data;
Upvotes: 0
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