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.

Can you create a working code snippet of it using plunker/JSfiddle/codepen? — Vikasdeep Singh, Apr 04 '18 at 05:38
You’re adding `products.map(renderSingleProduct)`, which is an _array_ instead of a string _outside of any table cell_. — Sebastian Simon, Apr 04 '18 at 05:40
I have an array of entries, each one is a row in the table. The commas appear before the table though, which is why I am confused. — AlexanderRohrig, Apr 04 '18 at 06:01

Robban · Accepted Answer · 2018-04-04T06:15:41.787

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

Commas Appearing in Javascript rendered HTML

1 Answers1