Получить объекты JSON с сервера

Question

Я пытаюсь получить объектный API-интерфейс JSON с сервера, и мой json начинается с объектов, и я не знаком с ответом Json, который начинается с объектов немедленно.

Json url

{
  "ABQ": {
    "airport": {
      "name": "Albuquerque International Airport",
      "code": {
        "iata": "ABQ",
        "icao": "KABQ"
      }
    }
  },
  "ACE": {
    "airport": {
      "name": "Lanzarote Airport",
      "code": {
        "iata": "ACE",
        "icao": "GCRR"
      }
    }
  },
  "ADB": {
    "airport": {
      "name": "Izmir Adnan Menderes International Airport",
      "code": {
        "iata": "ADB",
        "icao": "LTBJ"
      }
    }
  }
}

Мой код:

 Data :any

    getData(){

        this.http.get("xxxxxxxx/", {}, {}).then(data =>{

        this.Data = JSON.parse(data.data)

        console.log(this.Data)

        })
      }

HTML

 <div class="ion-padding">

    {{Data.airport.name}}

  </div>

Я получил ошибку

ОШИБКА TypeError: Невозможно прочитать свойство 'airport' из undefined at object.eval

как я могу получить данные json response?

Answer 1

В вашем примере есть две проблемы:

1. Вы пытаетесь отобразить данные до их загрузки.И пока вы пытаетесь получить пользовательские атрибуты, вы получаете исключения, такие как Cannot read property XXX of undefined
2. . Вы игнорируете промежуточные свойства вашего объекта данных.

Существует более одного способадля кожи кошки, и есть несколько возможных решений.Один из них я реализовал в этом примере https://stackblitz.com/edit/angular-zuqbry.

1. Я использую фильтр async, чтобы дождаться ответа сервера

   <p *ngFor="let item of data | async">
     {{item.airport.name}}
   </p>
   

2. I 'перебирая ключи объекта для получения всех «динамических ключей» и извлечения данных из объекта данных

   this.data = http.get()
     .pipe(
       map(response => {
         const keys = Object.keys(response);
         return keys.map(key => response[key]);
       })
     );
   

   Обратите внимание, что http - это объект CustomHttpService, который я создал для предоставления данных из жестко закодированного файлаОднако он работает очень похоже на оригинал HttpClient.