I’m setting up multiple filters to filter a gallery of images - all of which are kept in databases.
I have the following I want to filter by (any or all)
MembersName
Battlefield
Countrylocation
Category
and then a gallery - IGDataset.
I have the code as below - the clear button works on clearing all of the filters but when I select an option from the dropdown (these are tables) it just clears all of the images.
I’m pretty much a beginner at this so don’t know where my issue is (I’m not getting any red dots on the code indicating there is a problem).
import wixData from 'wix-data';
$w.onReady(() => {
$w('#IGDataset').onReady(() => {
var filter1 = wixData.filter()
filter1.filterTree.$and[0] = {}
filter1.filterTree.$and[1] = {}
filter1.filterTree.$and[2] = {}
filter1.filterTree.$and[3] = {}
$w('#MembersName').onChange(() => {
let MembersName = $w('#MembersName').value;
if (MembersName === 'MembersName') {
filter1.filterTree.$and[0] = {}
} else {
filter1.filterTree.$and[0] = {
'MembersName': MembersName
}
}
})
$w('#Battlefield').onChange(() => {
let Battlefield = $w('#Battlefield').value;
if (Battlefield === 'Battlefield') {
filter1.filterTree.$and[1] = {}
} else {
filter1.filterTree.$and[1] = {
'Battlefield': Battlefield
}
}
})
$w('#Countrylocation').onChange(() => {
let Countrylocation = $w('#Countrylocation').value;
if (Countrylocation === 'Countrylocation') {
filter1.filterTree.$and[2] = {}
} else {
filter1.filterTree.$and[2] = {
'Countrylocation': Countrylocation
}
}
})
$w('#Category').onChange(() => {
let Category = $w('#Category').value;
if (Category === 'Category') {
filter1.filterTree.$and[3] = {}
} else {
filter1.filterTree.$and[3] = {
'Category': Category
}
}
})
$w('#Search').onClick(() => {
filter();
})
$w('#Clear').onClick(() => {
$w('#MembersName').value = ""
$w('#Battlefield').value = ""
$w('#Countrylocation').value = ''
$w('#Category').value = ''
filter1.filterTree.$and[0] = {}
filter1.filterTree.$and[1] = {}
filter1.filterTree.$and[2] = {}
filter1.filterTree.$and[3] = {}
$w('#IGDataset').setFilter();
})
function filter() {
console.log(filter1.filterTree.$and)
$w('#IGDataset').setFilter(filter1)
}
})
})