Commas Appearing in Javascript rendered HTML

I am rendering HTML with Javascript and Contentful.

My code:

contentfulClient.getEntries({
   content_type: PRODUCT_CONTENT_TYPE_ID,
   order: '-fields.dateRated'
})
.then(function(entries) {
   container.innerHTML = renderProducts(entries.items)
})

function renderProducts(products) {
   return '<table id="film-table"><tr><th>Name</th><th>Rating</th></tr><tr><td>Check back tomorrow</td><td class="rating-cell">🆕</td></tr>' +
   products.map(renderSingleProduct) +
   '</table>'
}

However, when I test this a comma appears above the table for each entry: commas above table.

Thanks for the help.

The problem here is that the .map function returns an array. So when you're adding products.map(renderSingleProduct) to the existing string it is turning this array into a string, which includes the , as a separator.

If you add a .join('') call at the end everything should be fine as this turns the array back into a string with the provided separator.

function renderProducts(products) {
   return '<table id="film-table"><tr><th>Name</th><th>Rating</th></tr><tr> 
          <td>Check back tomorrow</td><td class="rating-cell">🆕</td></tr>' 
            +
            products.map(renderSingleProduct).join('') +
          '</table>'
          }