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

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

JSON-адрес

{
  "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.info(this.Data)

        })
      }

HTML

 <div class = "ion-padding">

    {{Data.airport.name}}

  </div>

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

ERROR TypeError: Cannot read property 'airport' of undefined at object.eval

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

кажется, вы пытаетесь отобразить данные до того, как обещание будет разрешено. возможно, <div ng-If = "Data">{{Data.airport.name}}</div> решит проблему

— 26.06.2019 15:08

Ошибка не отображается! , но у меня пустая страница? и данные есть в консоли @AlexeySemerenko

— 26.06.2019 15:12

хм, может, ng-if = "Data !== undefined" поможет?

— 26.06.2019 15:14

Ваши данные ответа — это попытка объекта JSON {{Data.ABQ.airport.name}} или {{Data.ACE.airport.name}} или {{Data.ADB.airport.name}} и так далее.

— 26.06.2019 15:16

Вы уверены, что это AngularJS? Не угловой?

— 26.06.2019 15:17

@SudhirOjha, я не могу использовать ADB или ABQ, потому что они каждый раз меняются

— 26.06.2019 15:18

ионный и угловой

— 26.06.2019 15:18

или вы можете ввести локальную переменную isDataReadyToDisplay и в "then()" установить для нее значение true после this.Data = JSON.parse(data.data). И в представлении проверьте эту переменную в ng-if (например: <div ng-if = "isDataReadyToDisplay">...)

— 26.06.2019 15:19

Тогда проблема заключается в том, что вы визуализируете свойства вложенных объектов до того, как получите данные с сервера, как указано выше, *ngIf должен работать на вас. Тем не менее, вы должны делать что-то с промежуточными свойствами, такими как ADB. Вы не можете просто игнорировать их

— 26.06.2019 15:20

что вы получаете с console.info(data) ?

— 26.06.2019 15:20

@SergeyMell Я не могу использовать ADB, потому что эти значения всегда меняются.

— 26.06.2019 15:21

@AmadouBeye ERROR TypeError: Cannot read property 'name' of undefined

— 26.06.2019 15:21

@AliGhassan, если данные поступают так, какой аэропорт вы хотите показать, в вашем ответе их 3 (я имею в виду, когда он динамический, как вы определяете, какой из них вы хотите просмотреть?)

— 26.06.2019 15:22

@RezaRahmati, вы можете проверить мои данные json url [jsoneditoronline.org/?id=a478c3ea711f4345800c4d3e3434a804]

— 26.06.2019 15:24

@SergeyMell посмотри мой URL jsoneditoronline.org/?id=a478c3ea711f4345800c4d3e3434a804

— 26.06.2019 15:24

@AliGhassan, хорошо, но если ваш объект выглядит как {a: {smthDynamic: {b: value} }}, вы не можете получить его как a.b только потому, что промежуточное значение является динамическим, и вы его не знаете. Это сработает

— 26.06.2019 15:25

@SergeyMell, так как лучше всего получить все эти данные? jsoneditoronline.org/?id=a478c3ea711f4345800c4d3e3434a804

— 26.06.2019 15:26

Вы можете попробовать это <div *ngFor='let item of Data | keyvalue'> Name = {{Data[item.key].airport.name}} </div>

— 26.06.2019 15:39

он сейчас работает, большое спасибо @SudhirOjha

— 26.06.2019 15:42

json angular

26.06.2019 15:05

Как сделать HTTP-запрос в Javascript?

В JavaScript вы можете сделать HTTP-запрос, используя объект XMLHttpRequest или более новый API fetch. Вот пример для обоих методов:

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

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

Я использую фильтр async, чтобы дождаться разрешения ответа сервера
```
<p *ngFor = "let item of data | async">
  {{item.airport.name}}
</p>
```
Я перебираю ключи объекта, чтобы получить все «динамические ключи» и получить данные из объекта данных.
```
this.data = http.get()
  .pipe(
    map(response => {
      const keys = Object.keys(response);
      return keys.map(key => response[key]);
    })
  );
```
Обратите внимание, что http — это объект CustomHttpService, который я создал для предоставления данных из жестко запрограммированного файла, однако он работает очень похоже на оригинальный HttpClient.

Вы можете проверить этот вопрос, пожалуйста? похож на мой

— 27.06.2019 21:57

Извините, я не понял, что вы имеете в виду в вашем комментарии

— 28.06.2019 09:17

Я имею в виду, проверьте этот вопрос, пожалуйста, stackoverflow.com/questions/56797773/…

— 28.06.2019 09:40

Конечно, я сделаю через некоторое время

— 28.06.2019 10:53

Кажется, ваш вопрос удален. По крайней мере, я получаю ошибку 404 страницы

— 28.06.2019 13:57

мне жаль . эта ссылка stackoverflow.com/questions/56803700/…

— 28.06.2019 15:24