Populate dropdown with response from server connect

[BlakeyUK]

Hi all,

I’m creating an admin page which has an App Connect call to a Server Connect DB query and returns data correctly, which I can see in the Chrome debug tools.

The data returned is a set of name-value pairs which are to be populated into a dropdown box, eg:

[
   { id: 1, name: "London"},
   { id: 2, name: "New York"}
]

But how do I get those values into a select (bootstrap 4 theme) so they’re visible to the end user?

I can the select actions to set the value, but not to populate all the options.

Any help is much appreciated!

Regards,
Andy

[brad]

Hi Andy, be sure your select form field is selected and you can add your dynamic recordset in the properties.

[BlakeyUK]

Thanks Brad - I was so close. All I had to do was in the Data Source property, go one more stop down to the “query” item. Thanks for that.

However

I have one more problem - the select is inside an iterator, which calls the data API when i click the select,and passes an ID from the iterator into the API. It runs succesfully, but populates ALL the selects with the values returned by the latest API each time.

Any thoughts?

Andy

[brad]

I’m glad you are closer!

Not sure I follow your issue though. Any chance you can provide screenshots to help explain it?

[BlakeyUK]

Thanks Brad.

I’ve attached a screenshot of Wappler, and of the actual webpage. Basically, as soon as the click event runs, the response from the API populates all the selectboxes, not just the one that was clicked.

Andy

[ben]

The following has a repeat for the rows and a repeat for the countries (purely for this example).

The code for the select looks like

<select class="custom-select" name="mySelect">
    <option value="">Select a country …</option>
    <option value="" dmx-bind:value="CountryID" dmx-repeat:rptcountries="scCountries.data.qryCountries">{{CountryName}}</option>
</select>