Hi,
I know this topic has been treated in many posts, but the more I look the more I get mad. I multi-checked my code and compared it with other posts, and I cannot see where the problem is.
Problem: I cannot get ‘unique values’ from the drop-down linked to a database. The values of my field key ‘category’ are repeated as you can see in the image. Any clue anyone? Thanks a lot:
import wixData from ‘wix-data’ ;
$w.onReady( function () {
wixData.query( “AllAssets” )
.limit( 1000 )
.find()
.then(results => {
const uniqueItems = getUniqueItems(results.items);
$w( “#DropDown1” ).options = buildOptions(uniqueItems);
});
function getUniqueItems(items) {
const itemsOnly = items.map(item => item.category);
return [… new Set(itemsOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return { label: curr, value: curr };
});
}
});
export function DropDown1_change(event$w) {
let sort = $w( “#DropDown1” ).value;
$w( “#dataset1” ).setFilter(wixData.filter().eq( “category” , sort));
}
See the Example: Remove duplicates from connected dropdown options using distinct() query . This will get you started in the right direction. The distinct() query does the heavy lifting.
Thanks, Yisrael. I tried to use distinct() as you suggested but still having problems. Any suggestion?:
import wixData from ‘wix-data’ ;
$w.onReady( function () {
wixData.query( “AllAssets” )
.limit( 1000 )
.ascending( “category” )
.distinct( “category” )
.then(results => {
let distinctList = bui
ldOptions(results.items);
distinctList.unshift({ “value” : ‘’ , “label” : ‘All Categories’ });
// Call the function that builds the options list from the unique titles
$w( “
#dataset1” ).options = distinctList;
});
}
function buildOptions(items) {
return items.map(curr => {
return { label: curr, value: curr };
});
}
The example I linked to sets the dropdown options property like this:
$w("#iContinent").options = distinctList;
However, you are trying to set the options property of the dataset which is incorrect which is why you are getting an error.
$w("#dataset1").options = distinctList;
I recommend opening up the example in the Editor, playing with the code, and then adapting it for your purposes.
Thanks! The first problem solved. Any clue for the other one?
An also? How do I link the drop-drown to the data set? Do I need it?
You apparently have mismatched parentheses or brackets. Again, it is much easier for someone with limited coding experience to start with the example and then making the needed changes.
But I don’t have a search field, Yisrael. Just a drop-down. So cleaning the search part code, this is the code i got , which is working, but not showing unique values (see images):
import wixData from “wix-data” ;
$w.onReady(() => {
loadContinents();
});
// Load continents dropdown using the distinct() function on the query
function loadContinents() {
// Run a query that returns all the items in the collection
wixData.query( “AllAssets” )
// Get the max possible results from the query
.limit( 1000 )
.ascending( “category” )
.distinct( “category” )
.then(results => {
let distinctList = buildOptions(results.items);
// unshift() is like push(), but it prepends an item at the beginning of an array
distinctList.unshift({ “value” : ‘’ , “label” : ‘All Categories’ });
// Call the function that builds the options list from the unique titles
$w( “#DropDown1” ).options = distinctList;
});
}
function buildOptions(items) {
return items.map(curr => {
// Use the map method to build the options list in the format {label:uniqueTitle, value:uniqueTitle}
return { label: curr, value: curr };
});
}
export function DropDown1_change(event) {
let sort = $w( “#DropDown1” ).value;
$w( “#dataset1” ).setFilter(wixData.filter().eq( “category” , sort));
}
And even copying the whole and changing the needed changes, I have the same result 
Where is the problem? Why i don’t get unique values in the drop-down?
import wixData from “wix-data” ;
$w.onReady(() => {
loadContinents();
});
let lastFilterTitle;
let lastFilterContinent;
let debounceTimer;
export function iTitle_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w( ‘#iTitle’ ).value, lastFilterContinent);
}, 500 );
}
export function DropDown1_change(event, $w) {
filter(lastFilterTitle, $w( ‘#DropDown1’ ).value);
}
function filter(title, category) {
if (lastFilterTitle !== title || lastFilterContinent !== category) {
let newFilter = wixData.filter();
if (title)
newFilter = newFilter.contains( ‘articleTitle’ , title);
if (category)
newFilter = newFilter.contains( ‘category’ , category);
$w( ‘#dataset1’ ).setFilter(newFilter);
lastFilterTitle = title;
lastFilterContinent = category;
}
}
// Load continents dropdown using the distinct() function on the query
function loadContinents() {
// Run a query that returns all the items in the collection
wixData.query( “AllAssets” )
// Get the max possible results from the query
.limit( 1000 )
.ascending( “category” )
.distinct( “category” )
.then(results => {
let distinctList = buildOptions(results.items);
// unshift() is like push(), but it prepends an item at the beginning of an array
distinctList.unshift({ “value” : ‘’ , “label” : ‘All Categories’ });
// Call the function that builds the options list from the unique titles
$w( “#DropDown1” ).options = distinctList;
});
}
function buildOptions(items) {
return items.map(curr => {
// Use the map method to build the options list in the format {label:uniqueTitle, value:uniqueTitle}
return { label: curr, value: curr };
});
}
Did the example work correctly for you?
Please post the editor URL of your site. Only authorized Wix personnel can get access to your site in the editor. Please include the name of the page involved.
Please find below the URL. There is only one page there.
Thank you, Yisrael.
https://javierpiles.wixsite.com/website-2
You need to disconnect the dataset from your dropdown:
Holy Shit! I was getting crazy. Thanks a lot!! 
Glad we were able to get it straighted out.
Could you recommend any post where they explain how to add another drop-down that could work together with the previous one, and filter each other according the the first selection done.
For example: I chose ‘Residential’ in the first drop-down, and ‘UK’ in the second one, so only show the values with ‘Residential’ in ‘UK’.
Thank you.
Take a look at the Cascading Form example to automatically populate a form element with options based on a previous selection.
I will. Thanks a lot, Yisrael.
Hi @javierpiles , I was reading through your post and have found the solution to the problem you’ve posted months ago. I’m not sure if you have found the solution you’ve needed but if you haven’t, I thought you might be interested to check out my post: https://www.wix.com/velo/forum/tips-tutorials-examples/unique-list-on-multiple-dropdown-that-are-linked-directly-to-your-data-collection
