Hi! I have a dropdown conected to a database
I don’t want the dropdown shows the empty fields on the database
How can I do that?
I don’t want the dropdown shows the empty fields on the database
It’s going to take a little code to accomplish. This example utilizes wixData.query using the distinct function and Javascript’s map function. Substitute your collection name, field key, and dropdown name.
$w.onReady(function () {
PopulateDropdown();
});
function PopulateDropdown(){
wixData.query("CollectionName")
.ascending("fieldKey")
.distinct("fieldKey")
.then((results) => {
$w("#dropdown1").options = buildOptions(results.items);
})
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
It works! Thanks! Another question, there are any other way to do this? Because I have 30 dropdown on a single page, telling the dataset filter the empty fields maybe?
Tying it to the same dataset that is connected to the current record creates the unwanted effect of filtering every dropdown on that one record.
What you could do is to make this above method flexible enough that it could be called from the onFocus event of every one of these dropdowns by using parameters and variables. The advantage of the onFocus event approach is that you pay the performance price only when the dropdown is accessed by the user. To populate all of these in the page onReady like the above example, as you are surely realizing, would be inefficient and time-consuming.
You would add a separate onFocus function like the example below for every one of your dropdowns. Make sure that you are using the field key from the content manager and not the field name.
$w.onReady(function () {
$w("#dropdown1").onFocus((event) => {
PopulateDropdown("collection1","Proyecto","#dropdown1");
})
});
function PopulateDropdown(CollectionName,fieldKey,dropdown){
wixData.query(CollectionName)
.ascending(fieldKey)
.distinct(fieldKey)
.then((results) => {
$w(dropdown).options = buildOptions(results.items);
})
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
Works too, but the list delay too much to show up when user clicks on the dropdown, this can be a problem for the end users. Any other idea? 
Though the delay is not ideal, I didn’t see it as a deal breaker in some brief testing. It definitely would depend on the number of records and connection speed.
Any other solution for what you are wanting to do is significantly more onerous to the user if you are needing to run all of those queries at run time.
You could periodically run some code in the back end. Take a look at this article:
https://support.wix.com/en/article/corvid-scheduling-recurring-jobs
The idea would be to populate some array fields in a new collection periodically (once an hour or several times a day) with these unique values that could quickly be utilized when this page runs to populate those dropdowns. Though it may be more trouble than it’s worth, it would be a way of not burdening this page with delays that this above approach would entail.
I think you know now why you don’t see this very often on web pages. Though a nice feature, there is a lot of data processing that needs to happen to get all of those unique values populated.
I have tried to use to code as I faced the same problem.
However, it shows that my dataset is not a collection.
Does this code can only be used on the “collection of the store” but not the normal “dataset”? Or how should I proceed? Please help.
WDE0025: The 篩選項目 collection does not exist. You cannot work with a collection using the Data API before it is created in the Editor.
Perhaps you also show your used code. Did you use the right collection-name?
@adamweilin As @russian-dima suggested, check out the collection name in the content manager. It is case sensitive.
Thank you both for the reminder. I just found that because the collection name is Cinese, I have to use the “ID” that generated from the system instead of the actual collection name. It’s working now.