0

I want to use a template literal, i.e. backticks, to insert elements from an array into my HTML. Essentially, I want to create my own extremely simple templating system.

I expected forEach to work, with each iterated callback just inserting the returned text. However, it just returns undefined, e.g.:

const myArray = ['square', 'triangle', 'circle'];
document.querySelector('div').innerHTML = `
  <p>Some shapes:<\p>
  <ul>
    ${myArray.forEach(elmt => `
      <li>${elmt}</li>
    `)}
  </ul>
`;
<div></div>

So, how do I do this?

1 Answer 1

6

Use myArray.map(...).join('') instead of myArray.forEach(...).

In a template literal, the results of code within a placeholder, i.e. within ${...}, are coerced to a string before insertion. A forEach(...) loop only returns undefined by definition. In contrast, map(...) returns a use-able value, i.e. an array. However, when the array is co-erced to a string, by default commas are inserted between elements. This results in unwanted text nodes, each containing a comma, appearing between the intended insertions. However, this default can be changed by explicitly joining the array elements with an empty string using .join(''):

const myArray = ['square', 'triangle', 'circle'];
document.querySelector('div').innerHTML = `
  <p>Some shapes:<\p>
  <ul>
    ${myArray.map(elmt => `
      <li>${elmt}</li>
    `).join('')}
  </ul>
`;
<div></div>

Note that this strategy can easily be used with other iterables by first simply coercing them to an array, e.g. by using [...mySet].map... instead of myArray.map..., etc.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.