I have been utilizing an API to retrieve specific types of purses from a retailer's website. After formatting the JSON data, I am able to display the purse image and name. However, they are currently displayed vertically, one per row. I aim to present these items next to each other in a layout similar to ecommerce sites. How can I achieve this? Below is the code snippet without including my API key for privacy reasons. Thank you in advance.
$(document).ready(function(){
//initiate HTTP request
$.get("http://api.vsapi01.com/search/by-url?apikey=[insert key here]0&url=https://product-images4.therealreal.com/BAL31068_2_product.jpg&index=real-bags ", function(data){
data['images'].forEach(function(image,index,images) {
var bagName = image.title;
var clickURL = image.pageUrl;
var pictureURL = image.imageUrl;
var image = "<img src=\""+pictureURL+"\"/>";
var clickableImage = "<a href=\"" + clickURL + "\">" + image + "</a>";
var wholeImage = "<div>" + clickableImage + "<br>" + bagName + "<br> " + "<div>";
$( ".display" ).append(wholeImage);
});
});
});<div class="display"></div>