I am very close to completion on my code, but still not sure how to have an ‘all’ option that isn’t linked to anything in my dropdown.
Basically should just skip the filter if ‘All’ is selected. Can I do something like this with an if statement?
if (type && type !== ‘Choose type of accommodation’) {
filteredResults = filteredResults.filter(item => item.type === type);
}
else (skip filter?)
OR
if (type && type !== ‘All’) {filterResults()}???
Here is my current code:
import wixData from ‘wix-data’;
let originalPropertiesInfo = ;
let filteredResults = ;
$w.onReady(function () {
//Query to get the information from the database
wixData.query(“Properties”)
.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) => {
//parseInt($w(‘#text53’).text = itemData.guests);
$w(‘#text53’).text = itemData.guests;
$w(#text52).text = itemData.title;
$w(‘#image2’).src = itemData.images;
$w(‘#text50’).text = itemData.bedrooms;
$w(‘#text51’).text = itemData.bathrooms;
});
});
function filterResults() {
filteredResults = ;
const type = $w(‘#Type’).value;
const guests = parseInt($w(‘#Guests’).value,10);
const rooms = parseInt($w(‘#Rooms’).value,10);
const bathrooms = parseInt($w(‘#Bathrooms’).value,10);
filteredResults = originalPropertiesInfo.slice();
if (type && type !== ‘Choose type of accommodation’) {
filteredResults = filteredResults.filter(item => item.type === type);
}
if (guests && guests !== ‘Choose number of guests’) {
filteredResults = filteredResults.filter(item => item.guests >= guests);
}
if (rooms && rooms !== ‘Choose number of beds’) {
filteredResults = filteredResults.filter(item => item.bedrooms >= rooms);
}
if (bathrooms && bathrooms !== ‘Choose number of bathrooms’) {
filteredResults = filteredResults.filter(item => item.bathrooms >= bathrooms);
}
if (filteredResults.length === 0){$w(‘#box3’).show();}
else $w(‘#box3’).hide();
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) => {
$w(‘#text53’).text = itemData.guests;
$w(#text52).text = itemData.title;
$w(‘#image2’).src = itemData.images;
$w(‘#text50’).text = itemData.bedrooms;
$w(‘#text51’).text = itemData.bathrooms;
});
}
export function refine_onClick(event, $w) {
filterResults();
$w(“#button6”).show();
}
export function button6_onClick(event, $w) {
$w(“#Type”).selectedIndex = ‘All’;
$w(“#Guests”).selectedIndex = 0;
$w(“#Rooms”).selectedIndex = 0;
$w(“#Bathrooms”).selectedIndex = 0;
$w(“#button6”).hide();
filterResults();
}