I posted this question on the Design Systems forum as well.
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.
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/