Extract data from JSON in Ionic

Question

I've newly been trying out the Ionic framework. I'm currently trying to make a movie reviews app, using this movie reviews API.

I'm able to retrieve the JSON successfully, but not able to extract the data.

Controller code:

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 code:

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

I get the error

Cannot read property 'display_title' of undefined.

But there is a field for display_title. Where am I going wrong?

initiate this.posts = [] in constructor, before this.http.get operation — mumair
– mumair, Commented Jun 27, 2017 at 9:43

CozyAzure · Accepted Answer · 2017-06-27 07:07:59Z

1

That is because your data is retrieved asynchronously. When your DOM is loaded, the data has not reached back yet, hence your posts is empty, and you will get undefined.

Also, use *ngFor:

To solve the problem, use Elvis operator.

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

Or use an async pipe:

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

edited Jun 27, 2017 at 7:07

answered Jun 27, 2017 at 6:07

CozyAzure

8,4987 gold badges39 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Saurav Sircar Over a year ago

Still not working. Its returning an empty list. But the Elvis operator helped remove the error.

CozyAzure Over a year ago

@SauravSircar Check using dev tools if your api is really retrieving the data. If your API is returning empty list, empty list it is. Also, are you using angular1 or angular2? use ngFor if its angular2.

Saurav Sircar Over a year ago

Its not an empty list. When I change "post?.display_title" to just "posts", it gives the output "[object Object], [object Object], [object Object] ..."

CozyAzure Over a year ago

Can you check in the console if the display_title is really the property name of the posts?

sebaferreras · Accepted Answer · 2017-06-27 06:59:56Z

0

Just like @CozyAzure says, in this line:

{{ post.display_title }}

the view is trying to access the display_title of something that has not being set yet (since it's being set when the asynchronous method is ready). That's why you get the following error:

Cannot read property 'display_title' of undefined.

So first, use the elvis operator to let angular know that it should not try to read the display_title property if the post is null:

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

Please notice that the proper sintax of the ngFor loop is

*ngFor= "let post of posts">

and not

*ngFor= "let post for posts">

And also notice that you tried to use AngularJs in your view (ng-repeat = "post in posts") but Ionic 2/3 (or just Ionic) is built on top of Angular, so refer to these docs to find some more info about how to do things like a for loop.

answered Jun 27, 2017 at 6:59

sebaferreras

44.7k11 gold badges120 silver badges137 bronze badges

1 Comment

Saurav Sircar Over a year ago

This did it! Thank you so much!

Collectives™ on Stack Overflow

Extract data from JSON in Ionic

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related