Filter Table Using Multiple Dropdowns

Ask the community
,
1

Hi!

I have 5 dropdowns 1. Player 2. Milestone 3. Year 4. Venue and 5. Attendance. When the user selects any or all of these dropdowns it will filter the table. I am using the following code but seem to be missing something. Filter 1. Player is working and showing the results in the table, however Filter 2, 3, 4, and 5 are showing the same data as dropdown filter 1 and are not working.

If anyone can tell me what I am missing that would be great!

Code being used:

import wixData from ‘wix-data’ ;
$w.onReady( function () {
wixData.query( “MasterTicketStubDB” )

.limit( 1000 ) .find()

.then(results => {
const uniqueItems = getUniqueItems(results.items);
$w( “#player” ).options = buildOptions(uniqueItems);
$w( “#milestone” ).options = buildOptions (uniqueItems);
$w( “#year” ).options = buildOptions (uniqueItems);
$w( “#venue” ).options = buildOptions (uniqueItems);
$w( “#attendance” ).options = buildOptions (uniqueItems);
});

function getUniqueItems(items) {
const itemsOnly = items.map(items => items.player, items.milestone, items.year, items.venue, items.attendance);
return [… new Set(itemsOnly)];
}

function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return { label: curr, value: curr };
});
}
});

export function player_change(event) {
let playerValue = $w( “#player” ).value; $w( “#dataset3” ).setFilter(wixData.filter().eq( “player” , playerValue));
}

export function milestone_change(event) {
let milestoneValue = $w( “#milestone” ).value; $w( “#dataset3” ).setFilter(wixData.filter().eq( “milestone” , milestoneValue));
}

export function year_change(event) {
let yearValue = $w( “#year” ).value; $w( “#dataset3” ).setFilter(wixData.filter().eq( “year” , yearValue));
}

export function venue_change(event) {
let venueValue = $w( “#venue” ).value; $w( “#dataset3” ).setFilter(wixData.filter().eq( “venue” , venueValue));
}

export function attendance_change(event) {
let attendanceValue = $w( “#attendance” ).value; $w( “#dataset3” ).setFilter(wixData.filter().eq( “attendance” , attendanceValue));
}

2

Show a part of your DB (database-structure).

3

Instead of using code you can add filters to your datasets.

  • right click your dataset.
  • open settings
  • Scroll down to add filter - select field → equal to → select user element → chose the right dropdown element.
    repeat this for all dropdowns.
    now your dataset should filter depending on what is selected.

Kind regards,
Kristof.