Question

我正在尝试从服务器获取JSON对象API，而我的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.log(this.Data)

        })
      }

HTML

 <div class="ion-padding">

    {{Data.airport.name}}

  </div>

我遇到了错误

错误TypeError：无法读取object.eval上未定义的属性“机场”

如何获取数据json响应？

Answer 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非常相似。

从服务器获取json对象

1 个答案: