Element data bindings problem with form select option

Builder content link

Builder public api key
79a2beca42894ade92dce05f54bd8f79

What are you trying to accomplish
form select option should come from Provinces data model
Provinces data model is populated and added
Under “Element data bindings” nothing comes up for “from Choose binding”

Screenshots or video link

Code stack you are integrating Builder with
HTML web components

There are a couple of ways you can bind your data to the Select block options:

  1. You could select the specific entries from that data model instead of querying for a list, and bind each option value and name inside the options tab
    option binding.

  2. You could use some custom code to extract the data you want from your content state and arrange it into an options list. Here is an example, however you would have to modify this to match your data:

let options = []
state.data.results.forEach((result) => {
    options.push({value: result.data.value, name: result.data.name})
})
return options

Thanks, I was able to get this to work with code (follows) but it would be helpful to have more complete documentation of what can be done with the visual tools and what cannot be done visually but requires code. Iknow this is a moving target but right now some documentation seems limited or out of date

let options = [];
if (state.provinces) {
    state.provinces.data.provinces.forEach((result) => {
        options.push({value: result.abbreviation, name: result.province})
    });
}
return options

1 Like