Javascript String to numbered list

💬 App Building
1

I have a javascript that looks at my database and returns a list of the top 10 themes. For example:
"Classic, Art, Mythology, Licensed, Story, Fancy, Futuristic, Science, Cultural, Nautical"

How do I take this dynamic list and change it into an ordered list like:

  1. Classic
  2. Art
  3. Mythology
  4. Licensed
    ...

Ive tried the HTML component, the list component, the text component, and cannot seem to get it to function the way that I need it to. At most it just lists the entire string.

2

Hello @macstrat,

There are two different ways you can achieve the result using Retool:

  1. Create a variable containing the list of themes. Use the <ul> and <li> HTML elements to create an ordered list. Use the map() method to iterate through the list of themes. Inside the map() method, wrap each theme in <li> tags and incrementally increase the value of a counter variable to create the ordered list.
  2. Create a table with a single column. Hide the column header. Populate the table with one row for each theme. Use a number column to create the ordered list.

Hope this helps.

:grinning:

Patrick

3

The mapping for both didnt work. it would not recognize the string as an array even with ".split(", ")". However, it did put me track to think about from a different perspective, especially with the table options. Instead of trying to parse a javascript string that referenced an SQL query, I wrote a new query to return the array by default that the table would recognize:

SELECT ThemeName, COUNT(*) AS Frequency
FROM Decks
WHERE ThemeName IS NOT NULL AND ThemeName != ''
GROUP BY ThemeName
ORDER BY Frequency DESC
LIMIT 5;

Thank you!