Commas Appearing in Javascript rendered HTML

Question

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.

Answer 1

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>'
          }