How can I make the comma disappear?

Question

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 !

Answer 1

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();