Show looped images from API

I want to display images from the below API data structure.

    "id": "932",
    "album": {
        "yes": [],
        "no": [

This my .ts file.

getalbum() {
      .subscribe((res: any) => {
        this.albums = res;

This is my .html file.

<div *ngFor="let image of albums">
    <img  class="images" src="{{image}}"/>


Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

I can’t give a concrete answer because you’ve redacted the actual data so heavily, but the main point is that you have to get to a part of the JSON that is an actual array - something bounded by [] as opposed to {} - in order to ngFor across it.

1 Like

@rapropos Thanks for the reply, Actually it is the real data that I got from API in PostMan I didn’t redact any data or array except the image URLs.
I can’t display images from it.

this.albums = res['album']['no'][0] if you want to address the images in the data structure under ‘no’, looking at the data structure in the json. That is the data element bound by [] and iterable under ngFor as per @rapropos’s comment.

Obviously, using typescript would be better, etc…

1 Like

@Tommertom, Thanks for the comment it worked :grinning: