Repeater Dropdown Filter

I’ve been working on this one page of my website for weeks now and I just can’t get the code to work. I have a database of Georgia based Animal Welfare Organizations. Each item is an organization with contact info and services they provide. Originally I had the services each as a separate field with a “Y” or “N” but now I have created a Service field with a code for each service they provide, like A for Adoptable Cats. So now, instead of having to try to figure out how to make it search my database for the field that matches my dropdown value and then looking to see if the value is “Y,” I just need it to look at the Service field to see if the dropdown value is listed. I have looked at any Articles, Videos, Examples, and Forum posts related to what I’m trying to do and in most cases I’ve looked at them multiple times. Below I will include the various forms of code I have tried and none of them have worked. I could really use someone’s help to get this working.

1 Like
import wixData from 'wix-data';

let welfaregroups = [];

$w.onReady(function () {
	wixData.query("welfareorganizations")
		.eq("region", $w('#locations').value)
		.contains("service", $w('#services').value)
		.find()
		.then((results) => {
			welfaregroups = results.items;
			$w('#repeater1').data = welfaregroups;
		});
	$w("#repeater1").onItemReady(($w, itemData) => {
		$w("#image6").src = itemData.title;
		$w("#text20").text = itemData.location;
		$w("#text19").text = itemData.dbaKnownAsGoesBy;
		$w("#button6").link = itemData.website;
		$w("#button7").link = 'mailto:' + itemData.email;
		$w("#button8").link = itemData.facebook;
	});
});

export function submit_click() {
	$w("#repeater1").data = welfaregroups;
	$w("#repeater1").forEachItem(($w, itemData) => {
		$w("#image6").src = itemData.title;
		$w("#text20").text = itemData.location;
		$w("#text19").text = itemData.dbaKnownAsGoesBy;
		$w("#button6").link = itemData.website;
		$w("#button7").link = 'mailto:' + itemData.email;
		$w("#button8").link = itemData.facebook;
	});
	$w('#repeater1').show();
}
import wixData from 'wix-data';

let welfaregroups = [];

$w.onReady(function () {
});

export function submit_click() {
	wixData.query("welfareorganizations")
		.eq("region", $w('#locations').value)
		.hasSome("service", $w('#services').value)
		.find()
		.then((results) => {
			$w('#repeater1').data = results.items;
				if (results.items.length === 0) {$w('#box6').show();}
				else $w('#box6').hide();
				if (results.items.length > 0) {$w('#repeater1').show();}
				else $w('#repeater1').hide();
		});
	$w("#repeater1").onItemReady(($w, itemData) => {
		$w("#image6").src = itemData.title;
		$w("#text20").text = itemData.location;
		$w("#text19").text = itemData.dbaKnownAsGoesBy;
		$w("#button6").link = itemData.website;
		$w("#button7").link = 'mailto:' + itemData.email;
		$w("#button8").link = itemData.facebook;
	});
}
import wixData from 'wix-data';

let welfaregroups = [];
let filteredResults = [];

$w.onReady(function () {
	wixData.query("welfareorganizations")
		.find()
		.then((results) => {
			welfaregroups = results.items;
			$w(`#repeater1`).data = welfaregroups;
		})
		.catch((error) => {
			let errorMsg = error.message;
			let code = error.code;
		});
	$w("#repeater1").onItemReady(($w, itemData) => {
		$w("#image6").src = itemData.title;
		$w("#text20").text = itemData.location;
		$w("#text19").text = itemData.dbaKnownAsGoesBy;
		$w("#button6").link = itemData.website;
		$w("#button7").link = 'mailto:' + itemData.email;
		$w("#button8").link = itemData.facebook;
	});
});

function filterResults() {
	filteredResults = [];
	const location = $w('#locations').value;
	const service = $w('#services').value;
	filteredResults = welfaregroups.slice();
	if (location && location !== 'Choose a region') {
		filteredResults = filteredResults.filter(item => item.region === location);
	} 
	if (service && service !== 'Choose a service') {
		filteredResults = filteredResults.filter(item => item.service >= service);
	}
	if (filteredResults.length === 0) {
		$w('#box6').show();
	}
	else $w('#box6').hide();
	if (filteredResults.items.length > 0) {
		$w('#repeater1').show();
	}
	else $w('#repeater1').hide();
}

export function locations_change() {
	$w('#repeater1').data = filteredResults;
	$w("#repeater1").onItemReady(($w, itemData) => {
		$w("#image6").src = itemData.title;
		$w("#text20").text = itemData.location;
		$w("#text19").text = itemData.dbaKnownAsGoesBy;
		$w("#button6").link = itemData.website;
		$w("#button7").link = 'mailto:' + itemData.email;
		$w("#button8").link = itemData.facebook;
	});
}

export function services_change() {
	$w('#repeater1').data = filteredResults;
	$w("#repeater1").onItemReady(($w, itemData) => {
		$w("#image6").src = itemData.title;
		$w("#text20").text = itemData.location;
		$w("#text19").text = itemData.dbaKnownAsGoesBy;
		$w("#button6").link = itemData.website;
		$w("#button7").link = 'mailto:' + itemData.email;
		$w("#button8").link = itemData.facebook;
	});
}

export function submit_click() {
	filterResults(welfaregroups);
	$w("#repeater1").onItemReady(($w, itemData) => {
		$w("#image6").src = itemData.title;
		$w("#text20").text = itemData.location;
		$w("#text19").text = itemData.dbaKnownAsGoesBy;
		$w("#button6").link = itemData.website;
		$w("#button7").link = 'mailto:' + itemData.email;
		$w("#button8").link = itemData.facebook;
	});
}

Hi,
Can you please share a link to your site and specify the name of the page so we can inspect?
Roi.

Thank you so much for the response. The site is www.classiccitycat.com and the specific page is Animal Welfare Organizations, https://www.classiccitycat.com/animalwelfareorgs.

Hi,
In your submit function it queries the value of the location dropdown but in your database it’s stored as label.
Moreover, You should use contains instead of hasSome method.
Check out this corrected function:

 export function submit_click() {
	const selectedIndexLocation = $w('#locations').selectedIndex;
	const selectedLocationByLabel = $w('#locations').options[selectedIndexLocation].label
	wixData.query("welfareorganizations")
		.eq("region", selectedLocationByLabel)
		.contains("service", $w('#services').value)
		.find()
		.then((results) => {
			$w('#repeater1').data = results.items;
			if (results.items.length === 0) {
				$w('#box6').show();
			} else $w('#box6').hide();
			if (results.items.length > 0) {
				$w('#repeater1').show();
			} else $w('#repeater1').hide();
		});
	$w("#repeater1").onItemReady(($w, itemData) => {
		$w("#image6").src = itemData.title;
		$w("#text20").text = itemData.location;
		$w("#text19").text = itemData.dbaKnownAsGoesBy;
		$w("#button6").link = itemData.website;
		$w("#button7").link = 'mailto:' + itemData.email;
		$w("#button8").link = itemData.facebook;
	});
}

Good luck!
Roi.

Words cannot express how grateful I am for your help! I cannot believe this page is finally working! Thank you so, so much!

I am having a similar issue. I have a database of realtors. I added a repeater. I added a dropdown button and a filter button. I added the state values to the dropdown labels and values.

This is the code I added that I found on another forum:

import wixData from ‘wix-data’;
$w.onReady( function () {
//TODO: write your page related code here…
$w(“#button5”).onClick(() => {
$w(“#dataset1”).setFilter(wixData.filter()
.eq(“state”, $w(“#dropdown1”).value));
});
});

When I try to use the filter, all the items go away. Any help would be greatly appreciated.

Thanks!