Dropdown code working in Run/Preview, BUT not live

Ask the community
,
1

Set up a simple search as per the example, https://www.wix.com/velo/example/search-a-database

When run the code in preview, everything works perfectly. Publish and switch to live and the dropdown box is not displaying anything.

The only error I get in the log is run/preview log is;
Wix code SDK Warning: The selectOption parameter at index 12 that is passed to the options function cannot be set to [object Object]. Options must contain either a non-null value or a non-null label. - Line 45

Copy of the code here:

import wixData from “wix-data” ;

$w . onReady (() => {
loadDepartments ();
});

let lastFilterTitle ;
let lastFilterDepartment ;
let debounceTimer ;
export function iTitle_keyPress_1 ( event , $w ) {
if ( debounceTimer ) {
clearTimeout ( debounceTimer );
debounceTimer = undefined ;
}
debounceTimer = setTimeout (() => {
filter ( $w ( ‘#iTitle’ ). value , lastFilterDepartment );
}, 500 );
}

export function iDepartment_change_1 ( event , $w ) {
filter ( lastFilterTitle , $w ( ‘#iDepartment’ ). value );
}

function filter ( title , department ) {
if ( lastFilterTitle !== title || lastFilterDepartment !== department ) {
let newFilter = wixData . filter ();
if ( title )
newFilter = newFilter . contains ( ‘title’ , title );
if ( department )
newFilter = newFilter . contains ( ‘department’ , department );
$w ( ‘#dataset1’ ). setFilter ( newFilter );
lastFilterTitle = title ;
lastFilterDepartment = department ;
}
}

function loadDepartments ( ) {
wixData . query ( ‘Departments’ )
. find ()
. then ( res => {
let options = [{ “value” : ‘’ , “label” : ‘All Departments’ }];
options . push (… res . items . map ( department => {
return { “value” : department . title , “label” : department . title };
}));
$w ( ‘#iDepartment’ ). options = options ;
});

}

This has puzzled me for 2 days now :tired_face:

2

Your loading of departments needed a quick tweak.

I’ve added brackets around your map statement. As well I separated the map
into its own statement. This makes it easier to debug and check the result
of the map. I’ve also removed the return statement because it didn’t make sense since you were populating the dropdown from within the query.

I also merged the two items as I was assigning them to the dropdown.
If there is an error, then the dropdown just gets populated with ‘All Departments’, but it still returns and continues.

Here is your fix.

let options = [{value: 'All Departments', label: 'All Departments'}];
wixData.query('Departments')
    .find()
    .then( (res) => {
        if (res.length >0) {
            let dept = res.items.map((department) =>  ({value: department.title, label: department.title}));
            $w('#iDepartment').options = [...options, ...dept];
        } else {
            console.log("There was no records available in [Departments].");
            $w('#iDepartment').options = options;
        }
    })
    .catch ( (error) => {
        console.log("Error trying to read [Departments]. Error is: "+error.message);
        $w('#iDepartment').options = options;
    });