Populate dropdown using a wixdata query

Ask the community
,
1

I struggled trying to find some sample code out there that would let me go to my wix collection, query it, and then populate a dropdown… simple enough right??? You would think a $w(‘#dropdown’).options = [some array, column name] function would exist right??? Nope… so… I finally got it working using the code I wrote below… I’m sure there are easier ways to do it, but everything thing I found searching was always talking about using some buildOptions method and all the examples were about getting distinct values (which I didn’t want) and frankly couldn’t make work… so I used a function to isolate the column from the query and resulting array result column I needed, then looped through it to populate my drop down… and it works :slight_smile: I’m now setting a dataset to use the drop down as a filter for what I want to display to the user… anyway hope this helps someone out there:

/////////////////////////////////////
//Clear Dropdown
$w( “#dropdown1” ).options=[]
//Ensure result will be for current user – requires you import wixUsers up top
let userid = wixUsers.currentUser.id
//Setup query to use current user AND what the user types in
wixData.query( “ReplaceWithYourCollection” )
// Query the collection for any items whose “Name” field contains
// the value the user entered in the input element
.eq( “user” , userid)
.contains( “name” , $w( “#input1” ).value)
.ascending( “name” )
.find() // Run the query
.then(res => {

//function to isolate the column I want
function extractColumn(arr, column) { return arr.map(x => x[column])}

//getting the number of items the query returend so I can use it in my loop
let qc = res.items.length

//debug paremeters I used to interrogate the date while I was building it
console.log(qc)
console.log(extractColumn(res.items, “name” ))

//loop through my query results so I can populate my dropdown with the results
for ( var i = 0 ; i < qc; i++) {

//using my fuction from above to get each item from my query
var value = extractColumn(res.items, “name” )[i];

//populating my dropdown here using the “push” function – This is an array function not a query function
let opts = $w( “#dropdown1” ).options;
opts.push({ “label” : value, “value” : value});
$w( “#dropdown1” ).options = opts;

}

///end of .then (end of query)
});
/////////////////////////////////////

2

Very helpful! Thanks!

3

In light of the up, this is the code easier and refactored:

$w.onReady(async () => {
  //Clear Dropdown
    $w("#dropdown1").options = []
    //Ensure result will be for current user -- requires you import wixUsers up top
    let userid = wixUsers.currentUser.id
  
  //Setup query to use current user AND what the user types in
    const query = await wixData
        .query("ReplaceWithYourCollection")
        // Query the collection for any items whose "Name" field contains
        .eq("user", userid)
        // the value the user entered in the input element
        .contains("name", $w("#input1").value)
        .ascending("name")
        .find() // Run the query

  const queryItems = query.items

  $w("#dropdown1").options = prepareDataForDropdown(queryItems, "name")
})

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