Here is an example of my JSON data:
{
"Stations": {
"44": {
"NAME": "Station 1",
"BRANCH_CD": "3",
"BRANCH": "Bay Branch"
},
"137": {
"NAME": "Station 2",
"BRANCH_CD": "5",
"BRANCH": "Beach Branch"
}
}
}
I am looking for a way to extract the "NAME" and "BRANCH" values from each "Station" and display them in separate dropdown lists.
The framework I am using is Angular 4. Below is the code snippet that retrieves the station data:
this.apiService.getStations().subscribe(data => {
this.stationList = data.Stations;
}, err => {
this.errorFetchingStations = err;
console.log("Error getting list of stations " + err);
})
When I log this.stationList into the console, it appears in this format:
{44:{NAME: "Name of station", BRANCH: "Name of branch"}}
{137:{NAME: "Name of station", BRANCH: "Name of branch"}}
and so forth.
However, attempting to bind the stationList to my select element results in an error message:
ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
<select class="form-control">
<option *ngFor="let station of stationList" [value]="station.NAME">{{station.NAME}}</option>
</select>