For loop in html component?

I'm referencing an array in the following manner in an HTML component.


Is it possible to do something like the following inside an HTML component for output?

{{for item in array.items}}
   <li>{{item.One}} with also {{item.two}}</li>

Or if there is a better way to accomplish this via retool open to suggestions, thanks for the help!

Hey @phevil! Would something like this work? You can write JS in a JS transformer and then throwing the transformer value into the HTML component.

I'm looping through my array to add <li> to each element, putting it all inside a <ul>, then returning the results (and also removing the commas with regex).

Here's my code:

const RenderNames = () => {
  const names = ["Jeff","Linguine","Nova","Bao"];

  const renderNames = (allNames) => {
    return Object.entries(allNames).map(([_key, value]) => `<li>hello ${value}</li>`);

  return `<ul> ${renderNames(names)} </ul>`;

return RenderNames().replace(/[, ]+/g,' ').trim()

Let me know if you have any questions at all!