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:
- Classic
- Art
- Mythology
- 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.
Hello @macstrat,
There are two different ways you can achieve the result using Retool:
- 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.
- 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: :grinning:](https://community.retool.com/images/emoji/apple/grinning.png?v=12)
Patrick
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!