CODEWITHSUNDEEP
htmlangulartypescript
Nikson
Nikson

Reputation: 940

How to iterate json data with img tag in Angular4

I am trying to bind the img url from api response. Here I have attached what I have tried so far.

Json data structure :

enter image description here

This is the structure of data I received from API

my-cart.component.ts

 this.CartdataService.get_Product_Details(this.productCode).subscribe(
    data => {
      this.productDetails = data;
      this.productImages = this.productDetails['0']['PROD_B']
      console.log(this.productImages);
    });

Receiving array of data in console

enter image description here

Here console I got the image url in an array.

HTML code

<img *ngFor="let images of productImages; let i = index" (mouseenter)="mouseEnter($event)" [src]="images['PRODUCT_THUMBNAIL']"
              [alt]="'img' + i" class="img-thumbnail" [attr.ref]="images[i]['PRODUCT_IMAGE']">

This is how I am trying to bind the image url from the response but I did not get the image.

Can anyone guide me to solve this.

Upvotes: 2

Views: 328

Answers (2)

Lakshmi Prasanna
Lakshmi Prasanna

Reputation: 456

they way you are assigning images are wrong.

Try with 

  this.productImages = this.productDetails[0]['PROD_B'].

and also make a change of below

  <div  *ngFor="let images of productImages; let i = index" >
        <img (mouseenter)="mouseEnter($event)" 
                  [src]="images['PRODUCT_THUMBNAIL']"
                  [alt]="'img' + i" class="img-thumbnail" 
                  [attr.ref]="images['PRODUCT_IMAGE']">
</div>

Upvotes: 1

Ashish Ranjan
Ashish Ranjan

Reputation: 12960

I think, you are missing a single quotation over the actual path..(binding the URL as a string but not an expression..) try this:

<img *ngFor="let images of productImages; let i = index" (mouseenter)="mouseEnter($event)" [src]="'images["PRODUCT_THUMBNAIL"]'"
          [alt]="'img' + i" class="img-thumbnail" [attr.ref]="'images[i]["PRODUCT_IMAGE"]'">

Upvotes: 0

Related Questions