How to iterate json data with img tag in Angular4

Question

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

Json data structure :

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

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.

Can you show the elements in the dom tree through devtools?

Ishmeet Singh
– Ishmeet Singh

2018-05-08 04:51:58 +00:00
Commented May 8, 2018 at 4:51 — Ishmeet Singh
– Ishmeet Singh, Commented May 8, 2018 at 4:51

Lakshmi Prasanna · Accepted Answer · 2018-05-08 05:29:31Z

1

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>

edited May 8, 2018 at 5:29

answered May 8, 2018 at 4:50

Lakshmi Prasanna

4564 silver badges17 bronze badges

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

6 Comments

Nikson Over a year ago

not worked for me ,after trying this HTML the other functionalities also get affected

Lakshmi Prasanna Over a year ago

this.productDetails[0] means accessing first object. It will not break. can you provide plunker or JSFiddle

Nikson Over a year ago

That's working fine ,console also got the array of URL's but the html part is not solved my issue

Lakshmi Prasanna Over a year ago

what are the error you are getting for the template..? any screenshot?

Nikson Over a year ago

ERROR TypeError: Cannot read property 'PRODUCT_IMAGE' of undefined in console

|

Ashish Ranjan · Accepted Answer · 2018-05-08 04:57:36Z

0

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"]'">

answered May 8, 2018 at 4:57

Ashish Ranjan

13k5 gold badges32 silver badges53 bronze badges

2 Comments

Nikson Over a year ago

I can surely say that the single quotation will not come there

Ashish Ranjan Over a year ago

@Nikson: Did you try with something like this then: [src]="'images[\'PRODUCT_THUMBNAIL\']'" ?

Collectives™ on Stack Overflow

How to iterate json data with img tag in Angular4

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related