Site: https://charris505.editorx.io/shp3/portfolio
I’ve been using the following tutorial to create multi-column filtering using a single dataset: https://stcroppe.wixsite.com/steveonsoftware/example-code/wix-dataset-filtering-multiple-columns The actual filtering functionality works just fine, but the #categoryDropdown and #stateDropdown return duplicate values and I can’t for the life of me figure out what’s wrong.
Update: I’m hoping to better understand the fundamental error that is preventing the unique values from being passed to the dropdowns using the code below. Any help you can provide troubleshooting would be greatly appreciated!
Connect dropdown list items = yes
Connect a dataset = #portfolio
Labels and values connect to:
-
#stateDropdown = State (text), ‘state’ fieldkey
-
#categoryDropdown = Category (text), ‘category’ fieldkey
Full Code
// Filtering functionality
class dropDownData {
constructor(recordList = []) {
this.updateRecordList(recordList);
}
// Call this function to initialise the object data set and reset the column lists.
updateRecordList(recordList) {
this.list = recordList;
this.resetFieldLists();
}
resetFieldLists() {
this.category = [];
this.state = [];
}
// Returns a unique list based on the values in the category column.
categoryList() {
if (this.category.length === 0) {
this.category = this.uniqueColumnListForField('category');
}
return this.category;
}
// Returns a unique list based on the values in the state colum
stateList() {
if (this.state.length === 0) {
this.state = this.uniqueColumnListForField('state');
}
return this.state;
}
// Helper method for extracting column records and making them unique. All list methods use this to generate a list containing objects with key value pairs 'label' and 'value,' which is expected by the $w.Dropdown.options property
uniqueColumnListForField(field) {
let result = [];
let uniqueValues = []; // Ensures values are unique
this.list.forEach(item => {
let fieldValue = item[field];
// Only stores field values that we haven't seen yet and skips null values
if (fieldValue && !uniqueValues.includes(fieldValue)) {
uniqueValues.push(fieldValue);
result.push({'label':fieldValue, 'value':fieldValue});
}
});
return result;
}
}
let dropDownRecords = new dropDownData();
// Initialize the dropdown once the data is available.
$w.onReady(function () {
$w('#portfolio').onReady(() => {
updateDropDownOptions();
});
});
// Update the dropdown lists from the currently filtered dataset. The data set is filtered by values from the dropdown lists.
function updateDropDownOptions () {
// Use getItems to load all items available from filtered dataset. When a filter is applied, (see updateGalleryFilter()) gets called to reload the dropdowns
$w('#portfolio').getItems(0,$w('#portfolio').getTotalCount())
.then((results) => {
// Update the dropdown object with the new data record list
dropDownRecords.updateRecordlist(results.items);
// Update the counter on the screen
$w('#textResults').text = results.totalCount;
// Load/Reload dropdown data sets from the dropdown list data object
$w('#categoryDropdown').options = dropDownRecords.categoryList();
$w('#stateDropdown').options = dropDownRecords.stateList();
});
}
// Function to filter dataset based upon the filter dropdown values
function updateGalleryFilter() {
// Empty filter will remove existing filters so if no dropdowns have values seelcted, then all table records will be available to the gallery.
let galleryFilter = wixData.filter();
if ($w('#categoryDropdown').value) {
galleryFilter = galleryFilter.eq('category', $w('#categoryDropdown').value);
}
if ($w('#stateDropdown').value) {
galleryFilter = galleryFilter.eq('state', $w('#stateDropdown').value);
}
//Updates the filter on the dataset
$w('#portfolio').setFilter(galleryFilter)
.then(() => {
// When we get here the dataset will be filtered so we need to reset the dropdowns from the newly filtered record lsit
updateDropDownOptions();
});
}
// Helper functions triggered when we make a filter list selection in a dropdown
export function categoryDropdown_change (event) {
updateGalleryFilter();
}
export function stateDropdown_change(event) {
updateGalleryFilter();
}
export function resetButton_click(event) {
$w("#categoryDropdown").selectedIndex = undefined;
$w("#stateDropdown").selectedIndex = undefined;
updateGalleryFilter();
}