For loop in html component?

App Building
,
1

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

{{array.items}}

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

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

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

2

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()

image
image2526×1224 300 KB

Let me know if you have any questions at all!

1 Like