template render a list of items with HTML

[akeni]

I have a template that has an array of items I want to list out as

elements.

where item = ['list1', 'list2', 'list3'];
templates: {
    item({html, item}) {
        return html`<ul>${ html`${item.map( x=> `<li>${x}</li>`).join("")}`)<ul>`
    }
}

This doesn't work. Does anyone know how to loop through and display the template literal?

[sarahdayan]

Hey @akeni,

This documentation section explains how to deal with loops when using html.

import { autocomplete } from '@algolia/autocomplete-js';

autocomplete({
  // ...
  getSources() {
    return [
      {
        // ...
        templates: {
          item({ item, html }) {
            return html`<div>
              <img src="${item.image}" alt="${item.name}" />
              <div>${item.name}</div>
              <ul>
                ${item.categories.map(
                  (category) =>
                    html`<li key="${category.id}">${category.label}</li>`
                )}
              </ul>
            </div>`;
          },
        },
      },
    ];
  },
});

If you can't make it work, please provide a working CodeSandbox so we can reproduce the problem and help you troubleshoot. Here's a starter sandbox using html to get you started.

[akeni]

Thanks for the quick answer! One thing I had to do in the map function was to return the html literal so

return html `<li>$(item.label}</li>` 

for it to work