populate combobox from a local json array file

[LefterisKoumis]

I defined a combobox:

 <calcite-combobox value="county" label="county" placeholder="County" id="beg_county"
                  style="padding-bottom: 10px; width: 100px;"></calcite-combobox>

Then, I loaded the content of a json file to an array with label and value:

esriRequest("./CountyRouteRanges.json", options)
        .then((response) => {
---------
 for (var prop in thedata) {
            if (thedata.hasOwnProperty(prop)) {
                countylist.push({
                label: prop,
                value: prop
              });
            }
          }
-------------

But I can't populate the combobox:

 let countyselection =  document.getElementById("beg_county")
countyselection.add(countylist);

[BenElan]

Hi @LefterisKoumis,

You need to create calcite-combobox-item components for each of the JSON entries, and then append them to the combobox. Here is a codepen: 

https://codepen.io/benesri/pen/zYpRpmp?editors=0010

[LefterisKoumis]

THank you. 

After I applied the loop it seems that it populates the combobox but the entries are not visible as they are in white color! I didn't use any css. To resolve the issue I applied css for color:black but it is not working. As you can see I tried also to apply the heightScale="l" but it doesn't expand.:

 <calcite-shell-panel slot="contextual-panel" heightScale="l" position="end" detached>

[BenElan]

Hmm, can you provide a codepen that reproduces the issue? In your original code you were using "label" instead of "textLabel" for the prop. Maybe that's the issue?

https://developers.arcgis.com/calcite-design-system/components/combobox-item/#component-api-properti...

[LefterisKoumis]

I fixed that but it still didn't work, because the countyselection.add(option) doesn't work.

So, I replaced it with the code you provided. 

 for (let items of countylist) {           
            const comboItem = document.createElement('calcite-combobox-item');
            comboItem.setAttribute('value', items.value);
            comboItem.setAttribute('labelText', items.label);
            countyselection.appendChild(comboItem);
          }

Countylist is:

 <calcite-combobox value="county" label="county" placeholder="County" id="beg_county"
                  style="padding-bottom: 10px; padding-left:30px; width: 100px;" selection-mode="single">
                </calcite-combobox>

[BenElan · Accepted solution]

If you prefer using setAttribute, then it should be like this:

comboItem.setAttribute('value', items.value);
comboItem.setAttribute('text-label', items.label);

[LefterisKoumis]

It works. Thank you. Also, as I mentioned in the previous post above, I am trying to make the panel to occupy  the whole height. I tried:

 <calcite-shell-panel slot="contextual-panel" heightScale="l" position="end" detached>

but it didn't work. So, I applied the style="height: 900px;" at each of  the calcite tab . It works, but is there a better way?

[BenElan]

Using vertical height is better, so it is not dependent on your monitor size:

style="height:100vh;" 

[LefterisKoumis]

I will post another post for this issue. Thanks.