Select to view content in your preferred language

populate combobox from a local json array file

812
1
04-05-2022 10:13 AM
LefterisKoumis
Regular Contributor II

I posted this question on the Design Systems forum as well.

https://community.esri.com/t5/calcite-design-system-questions/populate-combobox-from-a-local-json-ar...

Basically, the question is if we can populate a calcite select/combobox/dropdown  from an extenal json file?

The code that I used is listed in the script i posted on the design systems (above link)

This is for ArcGIS JS API 4.x and I use ES modules.

0 Kudos
1 Reply
ReneRubalcava
Frequent Contributor II

There's a couple of ways you can do this.

One is to iterate over the array and add a new calcite-combobox-item to the combobox.

 

const countyselection =  document.getElementById('beg_county');
for (let item of countyList) {
  const comboItem = document.createElement('calcite-combobox-item');
  comboItem.setAttribute('value', item);
  comboItem.setAttribute('text-label', item);
  countyselection.appendChild(comboItem);
}

 

 

This is fine, but could be improved because it's updating the DOM on each iteration. You could use a Fragment to limit it to a single DOM update.

 

 

const countyselection =  document.getElementById('beg_county');
const fragment = document.createDocumentFragment();
for (let item of countyList) {
  const comboItem = document.createElement('calcite-combobox-item');
  comboItem.setAttribute('value', item);
  comboItem.setAttribute('text-label', item);
  fragment.appendChild(comboItem);
}
countyselection.appendChild(fragment);

 

 

Another option is to use template literals, and innerHTML, but I think document methods are a little more straightforward.

I haven't tested this, but the comps should already be registered and display correctly.

And for reference, I was just looking at the doc for how the HTML is structured

https://developers.arcgis.com/calcite-design-system/components/combobox/

0 Kudos