Display image with product name and price


#1

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)


#2

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?


#4

Sure I am using angular:

html

     <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>
          </a>
       </div>

ts file:

getAllProducts() {
    this.mhttp.allProducts()
      .subscribe((data: any) => {
        this.products = data.data;
        console.log(data);
      },
        error => {
          console.log(error);
        });
  }

api call:

allProducts() {
    return this.http.get(
      `${this.uri}/v2/products?include=main_image`,
      { headers: new HttpHeaders().set('Authorization', 'Bearer ' + localStorage.getItem('auth')) }
    );
  }

#5

and my response is exactly like in the docs:

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


#6

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.


#7

Hi @drew

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


#8

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.