Hi,
i need help with a code concerning the filter of a repeater.
The website is an escape room website. The repeater mentioned above is supposed to contain
a list of escape rooms (contained in a database called ‘‘stanze’’). Now, so far i managed to create a filter that filters the repeater in 4 ways: an input text and 3 dropdown lists.
Everything works fine, except one dropdown filter. This is because this dropdown filter is supposed to work differently. Infact, i want this dropdown to filter the rooms by number of players. Every room has a min. and a max. number of players, and i already created 2 different colums in my database (with the value as a number). The dropdown filter contains all numbers from 0 to the max number existing in the colum ‘‘max player’’, so that a user can select, for instance, the number 5, and the repeater will show all rooms that allow people to play in 5. Basically, i want to filter all elements that has the selected element between the value in min. colums and max. column.
So, it is days i’m trying to make it to work, but still no results. I’m not a developer, so i’m only referring to articles and posts found here on wix code support and wix code forum.
I’m now pasting the code i’m using now. Hope someone can help me solve the issue.
import wixData from "wix-data";
$w.onReady(function () {
// Run a query that returns all the items in the collection
wixData.query("Stanze")
// Get the max possible results from the query
.limit(1000)
.find()
.then(results => {
// Call the function that creates a list of unique titles
const uniqueTitles = getUniqueTitles(results.items);
// Call the function that builds the options list from the unique titles
$w("#iRegione").options = buildOptions(uniqueTitles);
});
// Builds an array from the "Title" field only from each item in
// the collection and then removes the duplicates
function getUniqueTitles(items) {
// Use the map method to create the titlesOnly object containing all the titles from the query results
const titlesOnly = items.map(item => item.regione);
// Return an array with a list of unique titles
return [...new Set(titlesOnly)];
}
// Creates an array of objects in the form {label: "label", value: "value"} from the array of titles
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
// Use the map method to build the options list in the format {label:uniqueTitle, value:uniqueTitle}
return {label:curr, value:curr};
});
}
});
$w.onReady(function () {
// Run a query that returns all the items in the collection
wixData.query("Stanze")
// Get the max possible results from the query
.limit(1000)
.find()
.then(results => {
// Call the function that creates a list of unique titles
const uniqueTitles = getUniqueTitles(results.items);
// Call the function that builds the options list from the unique titles
$w("#iGenere").options = buildOptions(uniqueTitles);
});
// Builds an array from the "Title" field only from each item in
// the collection and then removes the duplicates
function getUniqueTitles(items) {
// Use the map method to create the titlesOnly object containing all the titles from the query results
const titlesOnly = items.map(item => item.genere);
// Return an array with a list of unique titles
return [...new Set(titlesOnly)];
}
// Creates an array of objects in the form {label: "label", value: "value"} from the array of titles
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
// Use the map method to build the options list in the format {label:uniqueTitle, value:uniqueTitle}
return {label:curr, value:curr};
});
}
});
let lastFilterCerca;
let lastFilterGenere;
let lastFilterRegione;
let lastFilterPlayers;
let debounceTimer;
//
// searchbox
export function iCerca_keyPress(event, $w) {
if (debounceTimer){
clearTimeout(debounceTimer);
debounceTimer=undefined;
}
debounceTimer=setTimeout(() => {
filter2($w('#iCerca').value, lastFilterGenere, lastFilterRegione, lastFilterPlayers)
//filter($w('#iCerca').value, lastFilterGenere, lastFilterRegione);
}, 500);
}
// filter for searchbar, genere and regione (giocatori still not working)
function filter2(title, genere, regione, giocatori) {
if (lastFilterCerca!== title || lastFilterGenere !== genere || lastFilterRegione !== regione || lastFilterPlayers !== giocatori) {
let min;
let max;
let newFilter = wixData.filter();
if (title)
newFilter=newFilter.contains('title',title);
if (genere)
newFilter = newFilter.contains('genere', genere);
if (regione)
newFilter = newFilter.contains('regione', regione);
//if (giocatori) {
$w('#Stanze').setFilter(newFilter);
lastFilterGenere=genere;
lastFilterCerca=title;
lastFilterRegione=regione;
lastFilterPlayers=giocatori;
}
}
function filterplayers (){
if (debounceTimer){
clearTimeout(debounceTimer);
debounceTimer=undefined;
}
debounceTimer=setTimeout(() => {
let numero = $w('#iGiocatori2').max ;
let filtragioc=wixData.filter();
filtragioc= filtragioc.le("maxGiocatori", numero);
$w("#Stanze").setFilter(wixData.filter(filtragioc)
//.between('maxGiocatori', 1 , numero)
);
}, 500);
}
// genere box
export function iGenere_change(event, $w) {
filter2(lastFilterCerca, $w('#iGenere').value, lastFilterRegione, lastFilterPlayers);
}
//regione box
export function iRegione_change(event, $w) {
filter2(lastFilterCerca, lastFilterGenere, $w('#iRegione').value, lastFilterPlayers);
}
//giocatori box (not working)
export function iGiocatori_change(event, $w) {
filterplayers($w('#iGiocatori2'));
}
export function Filtra_change(event, $w) {
//Add your code for this event here:
filterplayers();
}
I thank you in advance for those who will help me solve this issue. I please ask you to be specific in the explanation of the solution, as i’m pretty new to code. Would be better if you tell me exactly what to add or fix in the code above.
I also have the feeling that the way i worte the code is not the best, the most ‘‘optimized’’. If you think that the code written above is not written in a good way, and maybe you think that there’s a better and easier way to make it to work, don’t hesitate to tell it to me.
Thank you again,
Andrea