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;
});
//---------------------------------------------------------------------
}}}}})})