Unable to retrieve post list from Blogger

Ionic Framework ionic-v3
1

I am trying to fetch post list from one of the Blogger.com blog using http request but I am getting some error.

getPostList() {
        this.http.get('https://www.googleapis.com/blogger/v3/blogs/[MY_BLOGGER_BLOG_ID]/posts?fetchImages=true&orderBy=published&status=live&view=READER&key=[MY_API_KEY]')
            .map(res => res.json())
            .subscribe(data => {
                this.postList = data.items;
            })
    }

This throws an error that says:
Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Since I have worked on fetching data from WordPress blog so what am I missing here? Additional parameter?

2

The error message seems pretty self-explanatory. If you are passing postList to ngFor, it has to be an array, not an object.

3

Hi, I made few changes but still unable to make it work. Here is how objects are being returned.

<ion-card *ngFor="let post of postList">
        <div *ngFor="let thumbnail of post.images">
            <img src="{{thumbnail.url}}" />
        </div>
        <ion-item *ngFor="let author of post.author">
            <ion-avatar item-left>
                <img src="{{author.image.url}}" />
            </ion-avatar>
            <h2>{{author.displayName}}</h2>
            <p>{{post.published}}</p>
        </ion-item>
        <ion-card-content>
            <ion-card-title>
                {{post.title}}
            </ion-card-title>
            <p>{{post.content}}</p>
        </ion-card-content>
    </ion-card>

image
2017-07-19 10_08_47-MyApp - Ionic Lab.png828×464 21.6 KB

4

I also modified the request to:

getPostList() {
        this.http.get('https://www.googleapis.com/blogger/v3/blogs/[MY_BLOGGER_BLOG_ID]/posts?fetchImages=true&orderBy=published&status=live&view=READER&key=[MY_API_KEY]')
            .map(res => res.json().items)
            .subscribe(data => {
                console.log(data);
                this.postList = data;
            })
    }
5

you have to convert your object into an array. (before you assign your data.items to this.postList.
see post from @rapropos

example:

this.postList = Object.keys(data.items).map((k) => data.items[k]);

hope that helps.