Hi there!
I've created a dataset on Wix and linked it to a page with a repeater to search and filter based on various criteria. All of the categorical filters are working well, but I can't get the filter to work that searches between a range of years. Once I add in the last bit of code to try and search between a range of years, the rest of the code stops working.
Would someone be able to look at my code and please provide suggestions how to fix it?
Thanks in advance!
// filter function
$w.onReady(function () {
$w('#dropdown1, #dropdown2, #dropdown3, #dropdown4, #dropdown5, #dropdown6, #dropdown7, #dropdown8 ').onChange(() => {
const selectedVal = $w('#dropdown1').value;
const selectedVal2 = $w('#dropdown2').value;
const selectedVal3 = $w('#dropdown3').value;
const selectedVal4 = $w('#dropdown4').value;
const selectedVal5 = $w('#dropdown5').value;
const selectedVal6 = $w('#dropdown6').value;
const selectedVal7 = $w('#dropdown7').value;
const selectedVal8 = $w('#dropdown8').value;
let filter = wixData.filter();
if (selectedVal.length > 0 || selectedVal2.length > 0 || selectedVal3.length > 0 || selectedVal4.length > 0 ||
selectedVal5.length > 0 || selectedVal6.length > 0 || selectedVal7.length > 0 || selectedVal8.length > 0) {
filter = filter.contains("teCnumber", selectedVal)
.and(filter = filter.contains("country", selectedVal2)
.and(filter = filter.contains("region", selectedVal3)
.and(filter = filter.contains("tags", selectedVal4)
.and(filter = filter.contains("tags", selectedVal5)
.and(filter = filter.contains("tags", selectedVal6)
.between("teCyear", parseFloat($w ('#dropdown7').value), parseFloat($w('#dropdown8').value)
))))))
}
$w('#dataset1').setFilter(filter);
});
//RESET FILTER
$w("#button1").onClick(function () {
$w('#dataset1').setFilter(wixData.filter());
$w('#dropdown1').value = undefined;
$w('#dropdown2').value = undefined;
$w('#dropdown3').value = undefined;
$w('#dropdown4').value = undefined;
$w('#dropdown5').value = undefined;
$w('#dropdown6').value = undefined;
$w('#dropdown7').value = undefined;
$w('#dropdown8').value = undefined;
});
});
Ok, that is a lot of filters. I created this for you to try it. Let me know how it goes.
Just change the ids from your dropdowns to the same ones on the example.
//You need to rename your dropdowns ids to match the ones in the example for it to work. import wixData from 'wix-data' let selectedValues = [] let dropdowns const filterDataset = (e) => { selectedValues = dropdowns .map(({ id, value }) => ({ id: id.replace(/\d+/g, ''), value })) .filter((d) => d.value) let filtersValues = selectedValues.map((dropdown) => wixData.filter().contains(dropdown.id, dropdown.value) ) const allFilters = filtersValues.reduce((fn, obj) => fn.and(obj)) if ($w('#teCyearStart').value && $w('#teCyearEnd').value) { $w('#dataset').setFilter( wixData .filter() .between('teCyear', +$w('#teCyearStart').value, +$w('#teCyearEnd').value) .and(allFilters) ) } else { $w('#dataset').setFilter(allFilters) } } $w.onReady(function () { dropdowns = $w('#teCnumber, #country, #region, #tags1, #tags2, #tags3') dropdowns.onChange(filterDataset) $w('#teCyearStart, #teCyearEnd').onChange(filterDataset) })