Show looped images from API

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

{
    "id": "932",
    "album": {
        "yes": [],
        "no": [
            [
                "http://.X.Y.Z/storage/1/TITMGOnPb8j9CB1YaxymaGASyhuGOwCI86MLN8PK.png",
                "http://X.Y.Z/storage/2/qDC38dMm3lwFwuequHwANqbvd4jUE2BUqHdpqRuv.png",
                "http://X.Y.Z/storage/3/LTG3ligrNwZnKK7kSILZ754ZWFjUmX5EX1clrqcS.png"
            ]
        ]
    }
}

This my .ts file.

getalbum() {
    this.http
      .get('https://X.Y.Z/ap/project/albom')
      .subscribe((res: any) => {
        this.albums = res;
        console.log(this.albums)
      });
  }

This is my .html file.

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

THIS IS THE ERROR

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

5 posts - 3 participants

Read full topic