[RESOLVED] Auto filter a repeater

Ask the community
,
1

I see a number of posts on how to use a dropdown to let visitors choose the content of a repeater but I can’t seem to find anything about how to filter the items displayed in a repeater automatically when the page loads.

I’ve tried using $w(‘#dataset1’).setFilter(wixData.filter) but this only works with one function. As soon as I add an additional function the repeater disappears completely as if it can’t find any items that match the criteria.
For example:

var Teacher = “Teacher”;
var Student = “Student”;
var School = $w(‘#text42’).text;
$w(‘#dataset1’).onReady( () => {
$w(‘#dataset1’).setFilter(wixData.filter()
.eq(“status”, Teacher)
.eq(“schoolName”, School)
)
})

gets me nothing but if I remove one of the .eq functions it works. Thinking that I couldn’t use 2 .eq functions, I tried using one in combination with .startsWith and I still got an empty repeater.
I’m pretty sure I’m using these functions wrong so any help would be appreciated.

2

Have a read of this page here.
https://support.wix.com/en/article/about-filtering-and-sorting-database-content-displayed-in-page-elements

Otherwise, if you are still wanting to have the dropdown options then instead of using “equal”, you simply use the if statements to filter the array based on the number of user inputs values. If you have two dropdown, you should add another if statements and filter it.

As shown here in the ‘Build and set a dataset’s filter’
https://www.wix.com/corvid/reference/wix-dataset.Dataset.html#setFilter

For example, if you want to filter by city and by state, you should do the following:

function filterResults(results){ 

   const state = $w('#stateDropdown).value;
   const city = $w('#cityDropdown'#cityDropdown').value;
   
    if (state && state !== 'Choose state') {    
        results = results.filter(item => item.propertyState === state);
    } 
    //after the first if statement, the results is filtered by state
   
    if (city && city !== 'Choose city') { 	    
        results = results.filter(item => item.propertyCity === city);
    } 
    //results is filtered by both state and city 
    
    return results; 
}
3

Another way around it would be to get the user inputs on one page and save them, then go to the page which displays your repeater and call those user inputs back again and insert them into your code for the search so that when the page loads it then only shows the info that the user choose in the inputs.

To do this use Wix Storage.
https://www.wix.com/corvid/reference/wix-storage.html

If you are wanting to keep the person on the same page of the user inputs, then you either have to show your whole dataset info in the repeater, although you limit yourself to how many items the repeater does show.

Or you simply set up your repeater to only be shown when the user has selected their user inputs and if there is no matching value for user inputs, then the repeater stays hidden as well.

4

I was trying to automatically filter the results of a query on page load so there’s no need for user input like dropdown menus or the like.

I tried the code you have above and checked the original post for it to try and make it work but it wasn’t working for me. I still don’t fully understand the if statements as I don’t know what is being referred to with ‘school && school’.

I did find something else that works wonderfully though:
var studentData = [];
wixData.query(“2020_Registration”)
.find()
.then( (results) => {
studentData = results.items;
const initialFilter = studentData.filter( function (initial) {
return initial.status === “Student”;
})
console.log(initialFilter)
$w(‘#repeater1’).data = initialFilter;
})
. catch ( (err) => {
let errorMsg = err
})

The above code automatically pulls only the students from my database once the page has loaded. A modified version of it is used in an onChange event handler for a dropdown menu and it works just as well.

Thanks for your help.