I am basically building a airbnb type site using repeaters and dynamic pages. I want to be able to filter my repeaters by number of guests, rooms bathrooms etc in one go but the results must show either equal to or more than the required choice. Please see my layout so far below and my code for the first choice of guests:
Hi,
As for your first and second questions-
Instead of using the setFilter function, you can use the regular Javascript filter function.
I wrote an example of filtering data using multiple user inputs here which can be useful
As for your third question, you can add an if statement that checks if the length of array is zero than set the text value of a certain text with the relevant message .
Thanks Tal. Sorry I am still very new to this. This looks like it is for a table not repeaters so how would it differ? An example code would help a lot. And what is the syntax to get ‘more than’ with the filter?
In your example you use newRows = newRows.filter(item => item.positionLocation === location); but I am not using rows. TIA!
Hi,
Lets say that you have multiple properties and you wish to filter them based on their location.
Create a query to get all the properties and set their information to the repeater:
import wixData from 'wix-data';
let originalPropertiesInfo = [];
$w.onReady(function () {
//Query to get the information from the database
wixData.query("Properties")
.find()
.then((results) => {
originalPropertiesInfo = results.items;
$w(`#repeater1`).data = originalPropertiesInfo;
})
.catch((err) => {
let errorMsg = err;
});
//Set the information to the repeater
$w(`#repeater1`).onItemReady(($w, itemData) => {
//add here all the relevant elements of the repeater
//In this case, I've added a text and an image to the repeater
$w(`#textTitle`).text = itemData.title;
$w('#imageProperty').src = itemData.propertyImg;
});
});
Create a filter results function and use if statement for each of your filter fields. In this case, I used a dropdown to filter by a location:
function filterResults(results){
const city = $w('#cityDropdown').value;
if (city && city !== 'Choose city') {
results = results.filter(item => item.propertyCity === city);
}
return results;
}
For each user input, create an onChange event, filter the results based on the value (call the filterResults function) and set the filtered information to the repeater:
export function cityDropdown_change(event, $w) {
//filtering the results
const filteredResults = filterResults(originalPropertiesInfo);
//setting the data
$w(`#repeater1`).data = filteredResults;
//setting the repeater elements
$w(`#repeater1`).onItemReady(($w, itemData) => {
console.log(itemData.title);
$w(`#textTitle`).text = itemData.title;
$w('#imageProperty').src = itemData.propertyImg;
});
}
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.
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').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;
}
In case of filtering with 3 beds or more, the filter function should be the following:
if (bedsNum && bedsNum !== 'Choose number of beds') {
results = results.filter(item => item.bedsNum >= 3);
}
let originalPropertiesInfo = [];
//Query to get the information from the database
wixData.query(“Properties”)
.find()
.then((results) => {
originalPropertiesInfo = results.items;
$w(#repeater1).data = originalPropertiesInfo;
})
.catch((err) => {
let errorMsg = err;
});
//Set the information to the repeater
$w(#repeater1).onItemReady(($w, itemData) => {
//add here all the relevant elements of the repeater
//In this case, I’ve added a text and an image to the repeater
$w(#text1).text = itemData.title;
$w(‘#image1’).src = itemData.propertyImg;
});
});
if (guests && guests !== 'Choose number of guests') {
results = results.filter(item => item.people >= 3);
}
//after the first if statement, the results is filtered by state
if (rooms && rooms !== 'Choose number of guests') {
results = results.filter(item => item.bedrooms >= 3);
}
//results is filtered by both guests and rooms
return results;
}
I can’t see where i link the refine button to this as well?
Also I cannot open my tree view. It just does nothing if I click it. been happening the last 2 days
Thank you for your patience. I am learning a lot but still takes time
Needs to activate via onClick on my button (id #refine)
Please take a look and see where I am going wrong, I am on a tight deadline and would greatly appreciate it
import wixData from ‘wix-data’;
$w.onReady(function () {
let originalPropertiesInfo = [];
//Query to get the information from the database
wixData.query(“Queensland”)
.find()
.then((results) => {
originalPropertiesInfo = results.items;
$w(#repeater2).data = originalPropertiesInfo;
})
.catch((err) => {
let errorMsg = err;
});
//Set the information to the repeater
$w(#repeater2).onItemReady(($w, itemData) => {
//add here all the relevant elements of the repeater
//In this case, I’ve added a text and an image to the repeater
$w(#text52).text = itemData.title;
$w(‘#image2’).src = itemData.images;
$w(#text53).text = itemData.people;
$w(#text50).text = itemData.bedrooms;
$w(#text51).text = itemData.bathrooms;
$w(#text49).text = itemData.description;
});
});
if (guests && guests !== 'Choose number of guests') {
results = results.filter(item => item.people >= 3);
}
//after the first if statement, the results is filtered by state
if (rooms && rooms !== 'Choose number of beds') {
results = results.filter(item => item.bedrooms >= 3);
}
if (bathrooms && bathrooms !== 'Choose number of bathrooms') {
results = results.filter(item => item.bathrooms >= 3);
}
//results is filtered by both guests and rooms
return results;
}
let originalPropertiesInfo = [];
export function Guests_change(event, $w) {
//filtering the results
const filteredResults = filterResults(originalPropertiesInfo);
//setting the data
$w(#repeater2).data = filteredResults;
Hi Roi, The filtering isn’t working, however I’m not sure how to link my refine button to this code?
And also my IF statements for equal or more to seem wrong - Tal has it at 3 or more but it needs to be whatever is selected in the dropdown.
Hi,
Try this:
import wixData from ‘wix-data’;
let originalPropertiesInfo = [];
let filteredResults = [];
$w.onReady(function () {
//Query to get the information from the database
wixData.query("Queensland")
.find()
.then((results) => {
originalPropertiesInfo = results.items;
$w(`#repeater2`).data = originalPropertiesInfo;
})
.catch((err) => {
let errorMsg = err;
});
//Set the information to the repeater
$w(`#repeater2`).onItemReady(($w, itemData) => {
//add here all the relevant elements of the repeater
//In this case, I've added a text and an image to the repeater
$w(`#text52`).text = itemData.title;
$w('#image2').src = itemData.images;
$w(`#text53`).text = itemData.people;
$w(`#text50`).text = itemData.bedrooms;
$w(`#text51`).text = itemData.bathrooms;
$w(`#text49`).text = itemData.description;
});
});
function filterResults() {
filteredResults = [];
const guests = $w('#Guests').value;
const rooms = $w('#Rooms').value;
const bathrooms = $w('#Bathrooms').value;
if (guests && guests !== 'Choose number of guests') {
filteredResults = originalPropertiesInfo.filter(item => item.people >= guests);
}
//after the first if statement, the results is filtered by state
if (rooms && rooms !== 'Choose number of beds') {
filteredResults = originalPropertiesInfo.filter(item => item.bedrooms >= rooms);
}
if (bathrooms && bathrooms !== 'Choose number of bathrooms') {
filteredResults = originalPropertiesInfo.filter(item => item.bathrooms >= bathrooms);
}
//results is filtered by both guests and rooms
Guests_change();
}
export function Guests_change(event) {
//filtering the results
//setting the data
$w('#repeater2').data = filteredResults;
//setting the repeater elements
$w('#repeater2').forEachItem(($w, itemData, index) => {
$w(`#text52`).text = itemData.title;
$w('#image2').src = itemData.images;
$w(`#text53`).text = itemData.people;
$w(`#text50`).text = itemData.bedrooms;
$w(`#text51`).text = itemData.bathrooms;
$w(`#text49`).text = itemData.description;
});
}
export function refine_click(event, $w) {
//Add your code for this event here:
filterResults();
}
It has no errors and looks good but when I click refine nothing happens?