Populate dropdown list with code

Ask the community
,
1

I am trying to populate a dropdown list with code that uses the result from a query of a collection. I constructed an array and pointed the info to the dropdown but I don’t really know if I got the syntax right. I am getting the following error.

Wix code SDK error: The selectOption parameter of item at index 0 that is passed to the options method cannot be set to the value Test Option 1. It must be of type object.

And here’s my code:

export async function work_loader () {

wixData . query ( “Work” )
. lt ( “wTier” , pTier + 1 )
. find ()
. then ( w_result => {
console . log ( "Jobs Available: " , w_result . length );
var myArray = [];
for ( let i = 0 ; i < w_result . length ; i ++) {
myArray [ i ] = w_result . items [ i ]. title ;
console . log ( "Job " , i , " is " , myArray [ i ])
}
$w ( “#dropdown1” ). options = myArray ;
})
. catch (( err )=>{ console . log ( err );});
}

2

Hi there :wave:t2: I do something similar on my site. You’re thinking correctly in making an array, but within the array needs to be a Javascript object with a label and value to fill the dropdown.
Below is the code I use, update it to suit your query needs. You can check out this post where I got the idea from.

$w.onReady(async function () {

    $w("#dropdown1").options = []

    await wixData.query("Work")
        .contains("yourColumn", "yourInfo")
        .ascending("yourColumn")
        .find()
        .then(r => {

            let queryItems = r.items;
            $w("#dropdown1").options = prepareDataForDropdown(queryItems, "yourColumn")
            $w("#dropdown1").placeholder = "Choose Your Placeholder";
        })

    function prepareDataForDropdown(data, column) {
        return data.map(item => {
            return {
                label: item[column],
                value: item[column],
            }
        })
    }

Good luck!

3

If you really want to learn how to populate a DropDown from a DATABASE the right way (better way) → take a look onto the following posts…

  1. https://www.wix.com/velo/forum/coding-with-velo/update-database-collection-based-on-user-input-dropdown

  2. https://www.wix.com/velo/forum/coding-with-velo/radio-button-and-values-2?appSectionParams=%7B%22origin%22%3A%22member_posts_page%22%7D

These post will open your eyes :wink: (take a closer look especialy onto the first link).

4

Hi, I am trying to do a similar thing.

I have a collection, one column (height) should form the drop down and the other column should be output in a text box next to the drop down based on what the user selects in the drop down.

I’m only just beginning to explore Velo and have no coding background and so I am very new to this. Any pointers?

I am currently struggling to even populate the drop down without manually typing the array into the code.

1344×766 84.2 KB

1360×300 17.1 KB

1534×958 139 KB

5

@karl.49

did you ever read all the stuff included in the two provided LINKS ?
There you can follow how to generate your function step by step.

6

Your links don’t work for me unfortunately, I just get a screen like this.

2880×1752 270 KB

Anyway I have managed to get it to work now with the below code. Like I say, I am new to this and so have probably broken multiple best practices and coding rules but hey it works :laughing:.

// Velo API Reference: Introduction - Velo API Reference - Wix.com
import wixData from ‘wix-data’ ;

$w . onReady ( async function () {

function  prepareDataForDropdown ( data ,  column ) { 
    **return**  data . map ( item  => { 
        **return**  { 
            label :  item [ column ], 
            value :  item [ column ], 
        } 
    }) 
} 
wixData . query ( 'BikeSizeGuide' ) 
    . find () 
    . then (( results ) => { 
        if  ( results . items . length  >  0 ) { 
            let  items  =  results . items ; 
            $w ( "#heightDropdown" ). options  =  prepareDataForDropdown ( items ,  'title' ) 
        }  **else**  { 
            console . log ( "Nowt found" )  // handle case where no matching items found 
        } 
    }) 
    . catch (( error ) => { 
        let  errorMsg  =  error . message ; 
        let  code  =  error . code ; 
    }); 
$w ( '#heightDropdown' ). placeholder  =  "Select a height range" 

$w ( '#heightDropdown' ). onChange (( event ) => { 

    wixData . query ( 'BikeSizeGuide' ) 
        . eq ( 'title' ,  $w ( '#heightDropdown' ). value ) 
        . find () 
        . then (( results ) => { 
            if  ( results . items . length  >  0 ) { 
                let  item  =  results . items 
                let  x  =  item [ 0 ]. bikeSize 
                $w ( '#bikeSize' ). text  =  x 
                console . log ( x ) 
            }  **else**  { 
                console . log ( "Err" )  // handle case where no matching items found 
            } 
        }) 
        . catch (( error ) => { 
            let  errorMsg  =  error . message ; 
            let  code  =  error . code ; 
        }); 

});

});