Javascript template literals - function call

Question

I would like to know if is possible to call function inside a javascript template literals. For those who does not know https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals I have something like this:

`<div class="product-card-labels">
    ${statuses.forEach(function(status) { return `<span class="product-card-label">${status.name}</span>` })}
</div>`

As you can see I would like to call array.forEach() which should return string to the template.

Answer 1

You have the template syntax right, but are not returning anything in your function call. If you use .map and .join the output (instead of .forEach which returns undefined ), it'll work fine.

`<div class="product-card-labels">
    ${statuses.map(function(status) { return `<span class="product-card-label">${status.name}</span>`; }).join('')}
</div>`