populate combobox from a local json array file

LefterisKoumis — Tue, 05 Apr 2022 17:18:43 GMT

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.

Re: populate combobox from a local json array file

ReneRubalcava — Tue, 05 Apr 2022 17:44:47 GMT

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/

topic Re: populate combobox from a local json array file in ArcGIS JavaScript Maps SDK Questions

populate combobox from a local json array file

Re: populate combobox from a local json array file