Menu
I want to output fields from a Json file into my Products page and each element should be wrapped into a Bootstrap column for a good display. The way is displayed now , all the items are wrapped into a single column. I should dynamically add a </div> tag after every single product and start a new one right after it. I haven’t succeeded to come up with a valid solution yet. Someone can help me, please? Thanks. Here is my code:
“`
//display products
class UI {
displayProducts(products){
let output = ”;
<div class=”row”>
products.forEach(product =>{
output+= `<!– single product –>
<div class=”col-md-4″>
<article class=”product”>
<div class=”img-container”>
<div class=”thumbnail”>
<img src=${product.image} alt=”product” class=”product-img”/>
<button class=”bag-btn” data-id=${product.id}>Add to cart<i class=”fas fa-cart-plus”></i></button>
<div class=”caption”>
<p>${product.title} <span>€ ${product.price}</span></p>
</div> <!–end caption–>
</div> <!–end thumbnail–>
</div> <!–end img container–>
</article>
</div> <!–end column–>
</div> <!–end row–>
<!– end single product –>
` ;
}) //end of forEach
productsDOM.innerHTML = output;
}
}