Как я могу читать и связывать данные из этого JSON с выпадающим списком Select в Angular 2+

Question

Вот как выглядит мой JSON:

{
    "Stations": {
        "44": {
            "NAME": "Station 1",
            "BRANCH_CD": "3",
            "BRANCH": "Bay Branch"
        },
        "137": {
            "NAME": "Station 2",            
            "BRANCH_CD": "5",
            "BRANCH": "Beach Branch"        
        }
    }
}

Я хотел бы знать, возможно ли извлечь значения «ИМЯ» и «ФИЛИАЛ» из каждой «Станции» и связать их для разделения Выберитевходные [выпадающие списки]

Я использую Angular 4. Вот что у меня есть:

 this.apiService.getStations().subscribe(data => {
      this.stationList = data.Stations;
     }, err => {
      this.errorFetchingStations = err;
      console.log("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"}}

и т. Д.

Если я пытаюсь привязать stationList к своему выбору, как это, я получаю ошибку

Ошибка: ошибка при попытке diff '[объектObject]».Разрешены только массивы и итерации

    <select class="form-control">
        <option *ngFor="let station of stationList" [value]="station.NAME">{{station.NAME}}</option>
      </select>

Answer 1

вы должны преобразовать stationList в массив, и вы можете использовать Object.values ​​(data.Stations), как показано ниже.

this.apiService.getStations().subscribe(data => {
  var stations = data.Stations;
  this.stationList = Object.values(stations);
}, err => {
  this.errorFetchingStations = err;
  console.log("Error getting list of stations " + err);
})

Answer 2

Вместо этого у вас есть пара ключ-значение для объекта, ngFor ожидает массив, поэтому вам следует использовать приведенный ниже код

 this.apiService.getStations().subscribe(data => {
      this.stationList = Object.values(data.Stations); // returns an array
     }, err => {
      this.errorFetchingStations = err;
      console.log("Error getting list of stations " + err);
    })