Dropdowns display option ID's instead of labels

Ask the community
,
1

Hi there,

I have a repeater filtered through three conditional filter dropdowns (special thanks to @code-queen https://youtu.be/EhXed0u6wh0 ).

I have revised the code so that the dropdowns are populated through a main dataset ( “jobs” ) Reference Fields (that are each connected to secondary datasets (“fields”, “categories” & “regions”) each containing the relevant dropdown options. The code works fine.

My issue is that the dropdowns display the option ID’s instead of labels.
Below are some posts dealing with this issue, however I did not succeed in implementing them.

Can someone please have a look & tell me what is wrong?
Thank you!

https://www.wix.com/corvid/forum/community-discussion/wix-code-dropdown-list-returns-value-as-guid-and-not-string @purslowewebdesign

https://www.wix.com/corvid/forum/community-discussion/solved-labeling-dropdown-elements-with-a-reference-field
@yoav-wix

Here is my code:

import wixData from 'wix-data';
$w.onReady(function () {
    uniquefieldDropdown();
});

function uniquefieldDropdown() {
    wixData.query("jobs")
        .limit(1000)
        .find()
        .then(results => {
 const uniqueTitles = getUniqueTitles(results.items);
            $w("#fieldDropdown").options = buildOptions(uniqueTitles);
            });
 function getUniqueTitles(items) {
 const titlesOnly = items.map(item => item.field);
 return [...new Set(titlesOnly)];
    }
 function buildOptions(uniqueList) {
 return uniqueList.map(curr => {
 return { label: curr, value: curr };
        });
    }
}

export function fieldDropdown_change(event, $w) {
    uniquecategoryDropdown();
    $w("#categoryDropdown").enable();
    updateRepeaterFilter();
}
function uniquecategoryDropdown() {
    wixData.query("jobs")
        .contains("field", $w("#fieldDropdown").value)
        .limit(1000)
        .find()
        .then(results => {
 const uniqueTitles = getUniqueTitles(results.items);
            $w("#categoryDropdown").options = buildOptions(uniqueTitles);
        });
 function getUniqueTitles(items) {
 const titlesOnly = items.map(item => item.category);
 return [...new Set(titlesOnly)];
    }
 function buildOptions(uniqueList) {
 return uniqueList.map(curr => {
 return { label: curr, value: curr };
        });
    }
}

export function categoryDropdown_change(event, $w) {
    uniqueregionDropdown();
    $w("#regionDropdown").enable();
    updateRepeaterFilter();
}

function uniqueregionDropdown() {
    wixData.query("jobs")
        .contains("category", $w("#categoryDropdown").value)
        .limit(1000)
        .find()
        .then(results => {
 const uniqueTitles = getUniqueTitles(results.items);
            $w("#regionDropdown").options = buildOptions(uniqueTitles);
        });
 function getUniqueTitles(items) {
 const titlesOnly = items.map(item => item.region);
 return [...new Set(titlesOnly)];
    }
 function buildOptions(uniqueList) {
 return uniqueList.map(curr => {
 return { label: curr, value: curr };
        });
    }
}

export function regionDropdown_change(event) {
     updateRepeaterFilter();
}

function updateRepeaterFilter() {
 let repeaterFilter = wixData.filter();
 if ($w('#fieldDropdown').value) {
        repeaterFilter = repeaterFilter.eq('field', $w('#fieldDropdown').value);
    }
 if ($w('#categoryDropdown').value) {
        repeaterFilter = repeaterFilter.eq('category', $w('#categoryDropdown').value);
    }
 if ($w('#regionDropdown').value) {
        repeaterFilter = repeaterFilter.eq('region', $w('#regionDropdown').value);
    }
     $w('#jobs').setFilter(repeaterFilter)
    .then(() => {
    });
2

I have a similar question where my dropdowns show the selected value rather than the label of the selected value - does anyone know why that happens?

btw I noticed that only happens when I have the dropdown ‘Autocomplete’ on