Im creating a website and im trying to dropdown filter but the second dropdown option doesnt filter the objects when it has 2 items in dropdown.
heres the code…
import wixData from 'wix-data';
$w.onReady(function () {
uniqueDropDown1();
});
function uniqueDropDown1() {
wixData.query("Courses")
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#dropdownprovince1").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.province);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return { label: curr, value: curr };
});
}
}
export function dropdown1_change(event, $w) {
uniqueDropDown2();
$w("#dropdowncity2").enable();
}
function uniqueDropDown2() {
wixData.query("Courses")
.contains("province", $w("#dropdownprovince1").value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#dropdowncity2").options = buildOptions(uniqueTitles);
console.log("Dataset is now filtered");
$w("#listRepeater").data = results.items;
}).catch((err) => {
console.log(err);
});
$w("#listRepeater").expand();
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.city);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return { label: curr, value: curr };
});
}
}
