I'm very new to JS, and I dont know how to get rid of the "," between my HTML elements (the ones that were add by .innerHTML)
Here's my JS code :
let meubleData = []
const fetchProduct = async () => {
await fetch('http://localhost:3000/api/products')
.then((res) => res.json())
.then((res) => {
console.log(res.length)
meubleData = res
console.log(meubleData)
}
)
}
fetchProduct()
const displayProduct = async () => {
await fetchProduct()
document.getElementById('items').innerHTML = meubleData.map((meuble) =>
`<a href="./product.html?_id=${meuble._id}">
<article class = "article">
<img class="item__img" src = "${meuble.imageUrl}" alt = "${meuble.altTxt}" />
<h3 class="productName">${meuble.name}</h3>
<p class="productDescription">${meuble.description}</p>
</article>
</a>`
)
}
displayProduct()```
The problem is, between each new links created, there is a comma. I tried splice / slice, without success... Could you please help me ?
Thanks in advance for your answers and your time !
The reason that you're seeing the commas between items is because you're using array.map(), which returns an array. You're then adding that array to the DOM using innerHTML.
To get past this, you need to use the correct data-type for innerHTML, which is string. Specifically, HTML encoded as a string.
Here's how I would re-factor your existing code:
// get data from API as JSON and parse - returns an array of objects
const getMeubleData = async () => {
const apiData = await fetch("http://localhost:3000/api/products");
return await apiData.json();
};
// adds HTML to DOM - returns nothing
const displayProduct = async () => {
// get the data from the API
const meubleData = await getMeubleData();
// builds HTML output - returns HTML as string
const htmlOutput = (() => {
// create temp storage var
let temp = "";
// iterate over data from API
for (const meuble of meubleData) {
// for each entry, add the relevant object properties to the temp string
temp +=
`<a href="./product.html?_id=${meuble._id}">
<article class = "article">
<img class="item__img" src = "${meuble.imageUrl}" alt = "${meuble.altTxt}" />
<h3 class="productName">${meuble.name}</h3>
<p class="productDescription">${meuble.description}</p>
</article>
</a>`
}
// return the string with entries for each object
return temp;
})();
// get the output destination
const items = document.getElementById('items');
// add the HTML output to the DOM
document.getElementById("items").innerHTML = htmlOutput;
};
displayProduct();