🪜How to Fetch Dropdown Options from an API

Note: This page only applies to the Old Rendering Engine - for the New Rendering engine ask a Savvy Expert for help

You can insert manually the Dropdown options as if they were buttons from an option selector, but in some cases where options are too many, and there's an API that does this, you can fetch the options and filter them with your input.

There are two levels to this. You can fetch all the options (and it will filter them in the frontend as you type) OR if there are hundreds of results then you can do a live search as you type with {{$query}}

Step 1: Get the Dropdown Component Ready

• Create the dropdown component

• Check the "Fetch Options from an API" box that you'll find in the Advanced dropdown of the Options tab

• "Allow typing" and "Clearable" should also be checked!

Step 2: Set your URI

• Paste the URL you want to fetch from in the "Fetch URI" input box that's will appear when checking the "Fetch Options from an API" box

• In the before-mentioned case where there are hundreds of results, you can do a live search by passing a query parameter. You'll have to add {{$query}} where the param should go. That will automatically insert whatever you type in the dropdown component in the fetch URI

Step 3: Add your Fetch Headers and Transformers

• For the Headers, you'll need an object like this one:

• And your Transformers need to be inside a function called "transformer" that gets passed data (the response from the fetch) as an argument and returns the data transformed.