View screenshot showing unwanted comma in output
Hello there, I'm currently working on a gold shop website and dealing with an array of product objects. When mapping through this array to display products on the main page, I've encountered an issue where an extra comma character appears in the output unnecessarily. Can someone assist me in resolving this problem? Feel free to check out the screenshots for reference.
const products = [
{
id: 1,
title: 'Vintage Georgian Watch',
prob: 583,
weight: 19.74,
price: 2100,
img1: 'img/watchWm1.jpg',
img2: 'img/watchWm.jpg',
category: 'watch',
gender: 'woman'
},
// Additional product objects go here...
];
// Code snippet for displaying all products on the Main Page
var productsOuterDiv = document.getElementById('productsOuterDiv');
const productsBox = products.map(product => `<div class='productDiv'>
<div class='imgDiv'>
<img src='${product.img1}' alt='${product.title}'>
</div>
<h6><strong>${product.title}</strong></h6>
<p><strong>Weight:</strong> ${product.weight} grams</p>
<p><strong>Sinj (Prob):</strong> ${product.prob}</p>
<p><strong>Price:</strong> ${product.price} Lari</p>
<button class='btn btn-details'>Details</button>
</div>`);
productsOuterDiv.innerHTML = productsBox;