Как я могу прочитать и привязать данные из этого JSON к раскрывающемуся списку Select в Angular 2+
Вот как выглядит мой JSON:
{
"Stations": {
"44": {
"NAME": "Station 1",
"BRANCH_CD": "3",
"BRANCH": "Bay Branch"
},
"137": {
"NAME": "Station 2",
"BRANCH_CD": "5",
"BRANCH": "Beach Branch"
}
}
}
Я хотел бы знать, можно ли извлечь значения «NAME» и «BRANCH» из каждой «станции» и связать их с отдельными входами Select [раскрывающиеся списки]
Я использую Angular 4. Вот что у меня есть:
this.apiService.getStations().subscribe(data => {
this.stationList = data.Stations;
}, err => {
this.errorFetchingStations = err;
console.info("Error getting list of stations " + err);
})
this.stationList дает мне объект этого формата в консоли:
{44:{NAME: "Name of station", BRANCH: "Name of branch"}}
{137:{NAME: "Name of station", BRANCH: "Name of branch"}}
и так далее.
Если я попытаюсь привязать список станций к своему выбору вот так, я получаю сообщение об ошибке
ОШИБКА Ошибка: ошибка при попытке сопоставления "[объект объекта]". Разрешены только массивы и итерации.
<select class = "form-control">
<option *ngFor = "let station of stationList" [value] = "station.NAME">{{station.NAME}}</option>
</select>
Ответы 2
У вас есть пара значений ключа для объекта, а ngFor ожидает массив, поэтому вы должны использовать приведенный ниже код
this.apiService.getStations().subscribe(data => {
this.stationList = Object.values(data.Stations); // returns an array
}, err => {
this.errorFetchingStations = err;
console.info("Error getting list of stations " + err);
})
Рад помочь вам :)
Быстрое отслеживание, способ настройки данных состоит в том, что ВЕТВЬ повторяется для нескольких «Станций». например, станции 1, 9 и 10 будут иметь BRANCH = "Branch 1". Есть ли способ получить отдельный список ФИЛИАЛОВ, если не считать дедупликации массива?
вы должны преобразовать список станций в массив, и вы можете использовать Object.values (data.Stations), как показано ниже.
this.apiService.getStations().subscribe(data => {
var stations = data.Stations;
this.stationList = Object.values(stations);
}, err => {
this.errorFetchingStations = err;
console.info("Error getting list of stations " + err);
})
Вот это да. Вот и все. Спасибо.