在 Ionic 中从 JSON 中提取数据

Question

我最近一直在试用 Ionic 框架。我目前正在尝试制作一个电影评论应用程序，使用 this 电影评论 API。

我能够成功检索 JSON，但无法提取数据。

控制器代码：

constructor(public navCtrl: NavController, public http: Http) {
this.http.get('https://api.nytimes.com/svc/movies/v2/reviews/all.json?api-key=a96736504fda41f58b3af1ec5876d3b9')
  .map(res => res.json())
  .subscribe(data => {
    this.posts = data.results;
  });
}

HTML代码：

<ion-content>
  <ion-list>
    <ion-item ng-repeat = "post in posts">
      {{post.display_title}}
    </ion-item>
  </ion-list>
</ion-content>

我收到错误

Cannot read property 'display_title' of undefined.

但是 display_title 有一个字段。我哪里错了？

Answer 1

那是因为您的数据是异步检索的。当你的 DOM 被加载时，数据还没有返回，因此你的 posts 是空的，你会得到 undefined.

此外，使用 *ngFor：

要解决这个问题，请使用 Elvis 运算符。

 <ion-content>
  <ion-list>
    <ion-item *ngFor= "let post of posts">
      {{post?.display_title}}
    </ion-item>
  </ion-list>
</ion-content>

或使用 async 管道：

<ion-content>
  <ion-list>
    <ion-item *ngFor= "let post of posts | async">
      {{post.display_title}}
    </ion-item>
  </ion-list>
</ion-content>

Answer 2

正如@CozyAzure 所说，在这一行中：

{{ post.display_title }}

视图正在尝试访问尚未设置的内容的 display_title（因为它是在异步方法准备就绪时设置的）。这就是您收到以下错误的原因：

Cannot read property 'display_title' of undefined.

所以首先，使用 elvis 运算符让 angular 知道它不应该尝试读取 display_title 属性如果 post 为空：

<ion-content>
  <ion-list>
    <ion-item *ngFor= "let post of posts">
      {{post?.display_title}}
    </ion-item>
  </ion-list>
</ion-content>

请注意 ngFor 循环的正确语法是

*ngFor= "let post of posts">

而不是

*ngFor= "let post for posts">

并且还注意到您尝试在视图中使用 AngularJs (ng-repeat = "post in posts")，但 Ionic 2/3（或只是 Ionic）构建在 Angular 之上，因此，请参阅 these docs 以查找有关如何执行 for 循环等操作的更多信息。

在 Ionic 中从 JSON 中提取数据

Extract data from JSON in Ionic

ionic2

ionic3

angular