Form Dropdown - options from API response

Stockton · 2023-10-16T01:56:51.461+00:00

How can I have a dropdown form input, but the options for the dropdown come from the response of an API response? Bonus if I can have multiple dropdowns that get data from separate APIs including chaining. For example: dropdown 1 uses api1 to get options. Dropdown 2 uses the selection from dropdown 1 to return a list of new options from api2 for dropdown 2.

Stockton
2 years ago
How can I have a dropdown form input, but the options for the dropdown come from the response of an API response?

Bonus if I can have multiple dropdowns that get data from separate APIs including chaining.

For example: dropdown 1 uses api1 to get options.

Dropdown 2 uses the selection from dropdown 1 to return a list of new options from api2 for dropdown 2.
✅2
Stockton
2 years ago
I got the dropdown to work as a repeater based on results of the API. However, how do I use the selected value for future tasks (buttons, more apis, etc.)

Something about finding the index value of the selected item and returning the corresponding key or something like that.
Ilan
2 years ago
I was looking for exactly this - did you figure it out?
Stockton
2 years ago
Yeah yeah, I got it to work 🙂

What are you looking to do exactly? I can try and help.
Stockton
2 years ago
Alright, this is only the second time doing the select feature, but I made a video of me bumbling through it.

15 mins long, but hey, starting somewhere.

https://share.zight.com/X6unlZv4
🔥3
@Stockton
Alright, this is only the second time doing the select feature, but I made a video of me bumbling through it.

15 mins long, but hey, starting somewhere.

https://share.zight.com/X6unlZv4
Tom Ireland
2 years ago
Awesome demo of leveraging select and multiple API calls. 🤘 As a quick tip, to duplicate an element, choose the one you want, hold Option/Alt on the keyboard and drag the element to the appropriate place to duplicate. 😉
❤️2
@Tom Ireland
Awesome demo of leveraging select and multiple API calls. 🤘 As a quick tip, to duplicate an element, choose the one you want, hold Option/Alt on the keyboard and drag the element to the appropriate place to duplicate. 😉
Stockton
2 years ago
Thank you master 🙇‍♂️
Tod
2 years ago
Great energy @Stockton! Your continuous contribution to the toddle Community just made you advance to Community Level 2!
Ilan
2 years ago
@Stockton thank you so much! I finally got my form running that is awesome
Tod
2 years ago
Great energy @Ilan! Your continuous contribution to the toddle Community just made you advance to Community Level 2!
sellsy
2 years ago
Thanks for the demo. Do you think its possible to apply it to this kind of functionality ?
@sellsy
Thanks for the demo. Do you think its possible to apply it to this kind of functionality ?
Lucas G
2 years ago
Yes, you can.
Lucas G
2 years ago
Have a div repeat with the list and use a search input that filters the array of results
Assuming you have a defined list you want to search through
sellsy
2 years ago
Thanks Lucas. Actually the list is populated via an API. I think I need to create a popover to create the dropdown...?
@sellsy
Thanks Lucas. Actually the list is populated via an API. I think I need to create a popover to create the dropdown...?
Lucas G
2 years ago
I just made a div that repeats over the list and it shows while the search input is in focus
Basically onClick or focusin then show and on focusout hide
For my use case, clicking one of the results also closes the results list but for you that could depend on whether or not you want the user to choose one or multiple, etc
sellsy
2 years ago
Nice thanks I will give that a go
Alex
2 years ago
This whole thread is gold. Saving this!

Form Dropdown - options from API response

Stockton

Stockton

Ilan

Stockton

Stockton

Tom Ireland

Stockton

Tod

Ilan

Tod

sellsy

Lucas G

Lucas G

sellsy

Lucas G

sellsy

Alex