I am trying to implement code to filter a repeater based on a selection in dropdown on the same page. This works perfectly when I use the onChange event of the dropdown to filter based on a text field in the data collection that populates the repeater. This is a read-only site so I don’t have to deal with users adding or editing data.
However, I want to filter on a reference field rather than on a manually entered text value in the collection. I have found a number of places on this forum and in other sources that discuss this issue but none that simply lay out how to do it. There are several workarounds mentioned but I want to use this feature in a lot of other places in the site so want to understand how to do it correctly with code.
Here are the details –
forestdesignbuild.com – currently working on the Projects page using my workaround on a text field.
#repeater2 populated by #dataset3 (Project2 collection)
#dropdown1 with three choices manually entered –
Select All
Commercial
Residential
Using the onChange event of the dropdown I go through some If statements to try to filter what is shown in the repeater.
What I would like to implement is to filter on the reference field Category that links to #dataset9 (Category collection).
I have the codes generated in the Category collection but can’t get the syntax right to filter on that reference code.
I will be very grateful if someone can help me understand how to do this correctly. For this specific situation my workaround works okay but I have plans for complex features. Thanks in advance.
export function dropdown1_change_1(event) {
let dropdownValue = $w('#dropdown1').value
if (dropdownValue === "1") {
$w("#dataset3").setFilter(wixData.filter().eq("include", true))
//console.log('include')
}
else {
if (dropdownValue === "2") {
$w("#dataset3").setFilter(wixData.filter().eq("current", true))
}
else {
if (dropdownValue === "3") {
$w("#dataset3").setFilter(wixData.filter()
//.eq('#dataset9._id', '692e8d06-f517-4dfe-88f6-d48c874c43d5')
.eq("categoryReference", '3')
.eq("include", true))
}
else {
if (dropdownValue === "4") {
$w("#dataset3").setFilter(wixData.filter()
.eq("categoryReference", '2')
.eq("include", true))
}}}}}
Finally got this to work - code posted below.
import wixData from 'wix-data'; //Current Category Code 692e8d06-f517-4dfe-88f6-d48c874c43d5 //Commercial Category Code a560d7e6-c6b0-4917-be63-6c86f27fb97f //Residential Category Code dc9c0977-107a-48a2-94f2-bd325f0133e2 var result; var resultFiltered; var projectCode; var projectRecord; $w.onReady( function () { let result = wixData.query("Projects2") .include("categoryId") .eq("projectsInclude",true) .limit(30) .find() .then((result) => { $w('#repeater2').data = result.items; }) //--------------------------------------------------------------------- $w("#repeater2").onItemReady( ($item, itemData, index) => { $item('#text36').text = itemData.projectName; $item('#text38').text = itemData.projectDescription; $item('#text40').text = itemData.categoryId.categoryName; $item('#text43').text = itemData._id; $item('#image5').src = itemData.image1; }); //--------------------------------------------------------------------- $w('#drpCategory').onChange( ()=>{ let dropdownValue = $w('#drpCategory').value //--------------------------------------------------------------------- if (dropdownValue === '1') { let result = wixData.query("Projects2") .include("categoryId") .eq("projectsInclude",true) .limit(30) .find() .then((result) => { $w('#repeater2').data = result.items; }) //--------------------------------------------------------------------- $w("#repeater2").onItemReady( ($item, itemData, index) => { $item('#text36').text = itemData.projectName; $item('#text38').text = itemData.projectDescription; $item('#text40').text = itemData.categoryId.categoryName; $item('#image5').src = itemData.image1; }); } else { //--------------------------------------------------------------------- if (dropdownValue === '2') { let result = wixData.query("Projects2") .include("categoryId") .eq("projectsInclude",true) .eq("categoryId","692e8d06-f517-4dfe-88f6-d48c874c43d5") .limit(30) .find() .then((result) => { $w('#repeater2').data = result.items; }) //--------------------------------------------------------------------- $w("#repeater2").onItemReady( ($item, itemData, index) => { $item('#text36').text = itemData.projectName; $item('#text38').text = itemData.projectDescription; $item('#text40').text = itemData.categoryId.categoryName; $item('#image5').src = itemData.image1; }); } else { //--------------------------------------------------------------------- if (dropdownValue === '3') { let result = wixData.query("Projects2") .include("categoryId") .eq("projectsInclude",true) .eq("categoryId","a560d7e6-c6b0-4917-be63-6c86f27fb97f") .limit(30) .find() .then((result) => { $w('#repeater2').data = result.items; }) //--------------------------------------------------------------------- $w("#repeater2").onItemReady( ($item, itemData, index) => { $item('#text36').text = itemData.projectName; $item('#text38').text = itemData.projectDescription; $item('#text42').text = itemData.categoryId._id; //get rid of this once it is working $item('#text40').text = itemData.categoryId.categoryName; $item('#image5').src = itemData.image1; }); } else { //--------------------------------------------------------------------- if (dropdownValue === '4') { let result = wixData.query("Projects2") .include("categoryId") .eq("projectsInclude",true) .eq("categoryId","dc9c0977-107a-48a2-94f2-bd325f0133e2") //enter correct code for current .limit(30) .find() .then((result) => { $w('#repeater2').data = result.items; }) //--------------------------------------------------------------------- $w("#repeater2").onItemReady( ($item, itemData, index) => { $item('#text36').text = itemData.projectName; $item('#text38').text = itemData.projectDescription; $item('#text40').text = itemData.categoryId.categoryName; $item('#image5').src = itemData.image1; }); //--------------------------------------------------------------------- }}}}})})