Display image with product name and price


At the moment the product href is a different object than the data from the product.

This makes it very difficult as I can not *ngFor loop through the product as I can’t access the href without looping through another object.

How can I render the image without having to merge the objects (that also does not work as I lose the data and keep the images)


Hi Handre,

Can you provide an example of your code so I can see what you are doing and if there is a better way of doing it? Are you including the main_image in your call?


Sure I am using angular:


     <div class="col-sm-4 products" *ngFor="let product of products">
          <a routerLink="/product/viewProduct/{{product.id}}">
            <h3>{{ product.name | uppercase }}</h3>
            <h5>R {{ product.meta.display_price.with_tax.amount }}</h5>

ts file:

getAllProducts() {
      .subscribe((data: any) => {
        this.products = data.data;
        error => {

api call:

allProducts() {
    return this.http.get(
      { headers: new HttpHeaders().set('Authorization', 'Bearer ' + localStorage.getItem('auth')) }


and my response is exactly like in the docs:

data{ all the product data
included{ href for the images I would like to target


Hi Handre,

I think this post may help you Why aren't any images in array?.

You can use the map() function to create a new array with the image information included as part of the product object.


Hi @drew

I had a look at your example but that works when using the SDK, I am not using the SDK?


Hi Handre,

The Map function is part of the JS core language and is independent of the SDK. Once you have the JSON object assigned (made a call to the API and assigned the response to a variable) you can still use the map function to then create a new array with the image object included in the product object.