populate combobox from a local json array file

LefterisKoumis

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-array-file/m-p/1161016#M78

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.

ReneRubalcava

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/