Hello,
I have attempted to use a set of 3 dropdowns to allow users to filter my collection first by Gas then by Connection with the results on the third dropdown. I have managed to get the Gas and Connection fields to load in dropdowns without duplicates which is great but the third dropdown is not populating. Ideally, I’d like to have the results populate the third dropdown and then, upon selection by user, the final result to populate in the table below the dropdowns (or elsewhere if there is a better way to display end result other than dedicated page. Thank you very much!
// For full API documentation, including code examples, visit https://wix.to/94BuAAs
import wixData from 'wix-data';
$w.onReady(function () {
uniqueDropDown1();
});
function uniqueDropDown1() {
wixData.query("chromeflowmeters")
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#dropdown1").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.gas);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return { label: curr, value: curr };
});
}
}
export function dropdown1_change(event, $w) {
uniqueDropDown2();
$w("#dropdown2").enable();
}
function uniqueDropDown2() {
wixData.query("chromeflowmeters")
.contains("connection", $w("#dropdown2").value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#dropdown2").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.connection);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return { label: curr, value: curr };
});
}
}
export function dropdown2_change(event, $w) {
uniqueDropDown3();
$w("#dropdown3").enable();
}
function uniqueDropDown3() {
wixData.query("chromeflowmeters")
.contains("title", $w("#dropdown2").value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#dropdown3").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.title);
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return { label: curr, value: curr };
});
}
}
