Dynamic Icons via API

[karman]

Greetings, Community! I'm currently working on a list component in my application, which displays a list of countries retrieved through a SQL query. My goal is to enhance this list by adding the corresponding country flags as prefix icons. I'm using a flags API for this purpose. Although I've managed to integrate the flags into the prefix icon, I'm encountering an issue where the same flag icon is displayed for all countries in the list. Interestingly, when I select a specific country from the list, the flag updates correctly to match the selected country. However, if I open the dropdown menu again, all the items revert to displaying the same flag.

Is there a way to dynamically display the correct flag icon next to each country in my list, ensuring that each country's flag remains consistent and correct across all interactions?

?

[Paulo]

Hi @karman, could you share the settings you have for the "Mapped options" on the "Select" component?

If you add a "Prefix image", they should show up on the "Select" component.

Settings:

Select component with images:

Note: In this case I'm getting data directly from a table but the same should apply for the response of an API (I just happened to add the same image url for all my kittens).
​

[nickaus]

Hi @karman,
I recently add something very similar to one of our apps (mostly for a bit of fun). I found this free API resource:

https://restcountries.com/v3.1/all/

Initially I planned to use the API 'live' but it has no SLAs and from time to time does not respond. My approach was to create a table in the Retool db - countries

I used a transformer to extract just the info I want (.name, .flag (png) and .flag_png (url) ), then saved to the DB:

return {{getCountries.rawData.map(item => ({ 
  name: item.name.common, 
  flag: item.flag,
  flag_png: item.flags.png
})).sort()}};

.flag is an emoji (I think?) and .flag_png is a url, so I can use both in the app. A couple of examples and how to access the data below:

Hope this helps

Nick