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)
})
Thank you so much for taking the time to write this code and post, Bruno!
The rest of the code is working great! For some reason, searching between a range of years is still not working. I changed the dropdown boxes to #teCyearStart and #teCyearEnd. I double checked that the field type is a number so that the value can be calculated. I’m trying to rack my brain to think of anything else that could be off.
Any other ideas?
Thanks, again!!
@ktierney so, I decided to take the challenge and refactored all the code, so now, each dropdown works independently from each other. You can filter for years from a specific year AND up until a specific year.
//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
let filter = wixData.filter()
const filterDataset = (e) => {
let filterValues = []
let yearsValues = []
let filterYears
let startDate = +$w('#teCyearStart').value
let endDate = +$w('#teCyearEnd').value
let finalFilter
startDate && yearsValues.push(filter.ge('teCyear', startDate))
endDate && yearsValues.push(filter.le('teCyear', endDate))
selectedValues = dropdowns
.map(({ id, value }) => ({ id: id.replace(/\d+/g, ''), value }))
.filter((d) => d.value)
if (selectedValues.length > 0) {
filterValues = selectedValues
.map((dropdown) =>
filter.contains(
dropdown.id,
dropdown.value === '0' ? '' : dropdown.value
)
)
.reduce((fn, obj, _, array) => (array.length > 1 ? fn.and(obj) : fn))
} else {
filterValues = null
}
if (yearsValues.length > 0) {
filterYears = yearsValues.reduce((fn, obj, _, array) =>
array.length > 1 ? fn.and(obj) : fn
)
} else {
filterYears = null
}
finalFilter = filterValues
? filterYears
? filterValues.and(filterYears)
: filterValues
: filterYears
? filterYears
: filter
$w('#dataset').setFilter(finalFilter)
}
$w.onReady(function () {
dropdowns = $w('#teCnumber, #country, #region, #tags1, #tags2, #tags3')
dropdowns.onChange(filterDataset)
$w('#teCyearStart, #teCyearEnd').onChange(filterDataset)
})
@bwprado You genius!! This works! I’ve tested all the filters with different combinations and it’s working great.
I had a quick snag because I used a filter earlier in my code to create a keyword search box. After renaming a few things, they are working great together.
I cannot thank you enough!! 
Hope you have a beautiful day!
@ktierney you are welcome! Have a good one.