I am having trouble displaying the elements in a repeater to the corresponding values from my user input dropdown menu. I have a database called “UnitedStates_Facilities” with over 150 Veterinary facilities in most of the 50 states. I labeled on the field “states” and since there are multiple facilities in one single state, I was able to find the code that eliminates listing duplicated labels in the dropdown menu. I connected my dropdown, using code, to the “States” field in the “UnitedStates_Facilities” database. My problem is that when a user selects a “state”, the data elements in the repeater are not changing. I also connected a “State” title on the top of the page to display which state is selected. That is working fine. I need to use this type of search function for multiple databases on my site, so can someone please help me figure this out? Here’s a link, my code and some screenshots. Please let me know if I can provide any more info.
https://www.vitalvet.org/UnitedStates-Facilities/state/Connecticut
My code…
import wixData from ‘wix-data’;
$w.onReady( function () {
// Run a query that returns all the items in the collection
wixData.query(“UnitedStates_Facilities”)
// 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);
$w(“#searchState”).options = buildOptions(uniqueTitles);
}); //“#imake” is my drop down name
});
// 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 statesOnly = items.map(item => item.state);
// Return an array with a list of unique titles
return [… new Set(statesOnly)];
}
// 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};
});
}
Thanks!
Jo
