(SOLVED) Multiple group check boxes to filter a dataset and filter / update a drop down

fraser · April 26, 2019, 7:02pm

HI this seems like a simple one yet ill be damned if i can figure it out!

Basically i want to be able to click any combination of the checkboxes and have only the relevant results (Exercises) show in the drop down for me to choose from.

This is exactly what is happening on this website Exercise Finder | Bodybuilding.com apart from they are returning a repeater i want to return options to a drop down.

I have it working for just one check box. can someone help me with this request please.

import wixData from ‘wix-data’;

function trainingFilter (parameter) {
if ($w(‘#chestCheckbox’).checked)
$w(‘#trainingDataset’).setFilter(wixData.filter()
.contains(“muscleGroup”, $w(“#chestCheckbox”).value));
else
$w(‘#trainingDataset’).setFilter(wixData.filter())
}

export function chestCheckbox_change(event) {
trainingFilter()
}

tony-brunsman · April 26, 2019, 11:07pm

Hi Fraser,

It looks like you added individual checkboxes and then grouped them. I know it’s going to take some time, but Wix now has checkbox groups and it would be way, way easier to code what you have in mind using checkbox groups.

On a collection that I have that includes a field called “city”, I set up a checkbox group of cities and used the code below to filter a dataset displayed in a table:

export function FilterByCity(){
 let oCities = [];
 // Get the indexes of all the checkboxes checked in that group
 let selectedCities = $w("#checkboxGroup1").selectedIndices;
 // Now, loop through the checked items and add each city to the Cities array
 if (selectedCities.length > 0){
     for (var i = 0; i < selectedCities.length; i++) {
          oCities.push($w('#checkboxGroup1').options[selectedCities[i]].value);
      }
      $w("#dataset1").setFilter(wixData.filter()
        .hasSome("city", oCities)
       );
    } else {
        $w("#dataset1").setFilter(wixData.filter()
        );      
    }
}


export function checkboxGroup1_change(event) {
    FilterByCity();
}

Since you have four different groups, you would need to add four different hasSome conditions.

fraser · April 27, 2019, 5:10am

Hi @tony-brunsman

Thats pretty cool! makes it easier to manage once the groups are set up (Yes it took me a while)

So now i tested it by filtering just the first field (ppl = Push pull legs) and it worked fine and filtered my drop down which is connected to the dataset via the wix way.

Once i tried to add the other 3 fields it stopped working nothing populates in the drop down even if i just select an option from ppl, i guess i messed up somewhere? would you be so kind to have a look at my code and re arrange it if possible?

One other thing my drop down box is very slow to update sometimes needs 2 clicks to have the correct values init… why is that?

import wixData from ‘wix-data’;

export function FilterByExercise(){
let ppl = ;
let exerciseType = ;
let equipmentType = ;
let muscleGroup = ;

// Get the indexes of all the checkboxes checked in that group
let selectedppl = $w(“#pushPullcheckboxgroup”).selectedIndices;
let selectedexerciseType = $w(“#exerciseTypecheckboxgroup”).selectedIndices;
let selectedequipmentType = $w(“#equipmentCheckboxgroup”).selectedIndices;
let selectedmuscleGroup = $w(“#muscleGroupcheckboxgroup”).selectedIndices;
// Now, loop through the checked items and add each city to the Cities array
if (selectedppl.length > 0){
for ( var i = 0; i < selectedppl.length; i++) {
ppl.push($w(‘#pushPullcheckboxgroup’).options[selectedppl[i]].value);
exerciseType.push($w(‘#exerciseTypecheckboxgroup’).options[selectedppl[i]].value);
equipmentType.push($w(‘#equipmentCheckboxgroup’).options[selectedppl[i]].value);
muscleGroup.push($w(‘#muscleGroupcheckboxgroup’).options[selectedppl[i]].value);
}
$w(“#trainingDataset”).setFilter(wixData.filter()
.hasSome(“ppl”, ppl)
.hasSome(“exerciseType”, exerciseType)
.hasSome(“equipmentType”, equipmentType)
.hasSome(“muscleGroup”, muscleGroup)
);
} else {
$w(“#trainingDataset”).setFilter(wixData.filter()
);
}
}

export function pushPullcheckboxgroup_change(event) {
FilterByExercise();
}

export function exerciseTypecheckboxgroup_change(event) {
FilterByExercise();
}

export function equipmentCheckboxgroup_change(event) {
FilterByExercise();
}

export function muscleGroupcheckboxgroup_change(event) {
FilterByExercise();
}

tony-brunsman · April 27, 2019, 6:47am

@fraser You need to loop through each of those selected arrays separately. You’re currently looping just through the push/pull one.

fraser · April 27, 2019, 8:31am

@tony-brunsman can u show me how I loop the others sorry mate still learning loops, the below is as far as i can get it but i get errors and cannot seem to close the function.

import wixData from ‘wix-data’;

export function FilterByExercise(){
let ppl = ;
let exerciseType = ;
let equipmentType = ;
let muscleGroup = ;

// Get the indexes of all the checkboxes checked in that group
let selectedppl = $w(“#pushPullcheckboxgroup”).selectedIndices;
let selectedexerciseType = $w(“#exerciseTypecheckboxgroup”).selectedIndices;
let selectedequipmentType = $w(“#equipmentCheckboxgroup”).selectedIndices;
let selectedmuscleGroup = $w(“#muscleGroupcheckboxgroup”).selectedIndices;
// Now, loop through the checked items and add each field to the array
if (selectedppl.length > 0){
for ( var i = 0; i < selectedppl.length; i++) {
ppl.push($w(‘#pushPullcheckboxgroup’).options[selectedppl[i]].value);
}

if (selectedexerciseType.length > 0){
for ( var i = 0; i < selectedexerciseType.length; i++) {
exerciseType.push($w(‘#exerciseTypecheckboxgroup’).options[selectedppl[i]].value);
}

if (selectedequipmentType.length > 0){
for ( var i = 0; i < selectedequipmentType.length; i++) {
equipmentType.push($w(‘#equipmentCheckboxgroup’).options[selectedppl[i]].value);
}

if (selectedmuscleGroup.length > 0){
for ( var i = 0; i < selectedppl.length; i++) {
muscleGroup.push($w(‘#muscleGroupcheckboxgroup’).options[selectedppl[i]].value);
}

  $w("#trainingDataset").setFilter(wixData.filter() 
    .hasSome("ppl", ppl) 
    .hasSome("exerciseType", exerciseType) 
    .hasSome("equipmentType", equipmentType) 
    .hasSome("muscleGroup", muscleGroup) 
   ); 
}  **else**  { 
    $w("#trainingDataset").setFilter(wixData.filter() 
    }) 

  . **catch** ( (err) => {

let errorMsg = err;
console.log(errorMsg);
})
}

export function pushPullcheckboxgroup_change(event) {
FilterByExercise();
}

export function exerciseTypecheckboxgroup_change(event) {
FilterByExercise();
}

export function equipmentCheckboxgroup_change(event) {
FilterByExercise();
}

export function muscleGroupcheckboxgroup_change(event) {
FilterByExercise();
}

tony-brunsman · April 27, 2019, 1:12pm

@fraser This is a lot of code to go through. Let me show how the first and second ones should go:

// Now, loop through the checked items and add each field to the array
if (selectedppl.length > 0){
    for (var i = 0; i < selectedppl.length; i++) {
       ppl.push($w('#pushPullcheckboxgroup').options[selectedppl[i]].value);
    }
}

if (selectedexerciseType.length > 0){
   for (var i2 = 0; i2 < selectedexerciseType.length; i2++) {
     exerciseType.push($w('#exerciseTypecheckboxgroup').options[selectedexerciseType[i2]].value);
   }
}

Note a few things:

The counter variable needs to be changed with each of these loops. I changed the second one to i2.
In the push function, you need to reference the index array appropriate for that checkbox group, selectedexerciseType in this case.
You need a closing brace after the for loop and if statement with each group.
Issue the filter command below and outside the fourth group, the muscle group.

fraser · April 27, 2019, 1:56pm

@tony-brunsman thanks mate appreciate your time once i see the full code ill understand in future.

I’ve written as below but have a parsing error on the else function after the filter so i commented it out for now.

The function works perfectly with the single push pull group but doesn’t work when i un comment and activate the second if function equipment type as soon as you check a box in push pull there is no entry in the drop down at all.

import wixData from ‘wix-data’;

export function FilterByExercise(){
let ppl = ;
let exerciseType = ;
let equipmentType = ;
let muscleGroup = ;

// Get the indexes of all the checkboxes checked in that group
let selectedppl = $w(“#pushPullcheckboxgroup”).selectedIndices;
let selectedexerciseType = $w(“#exerciseTypecheckboxgroup”).selectedIndices;
let selectedequipmentType = $w(“#equipmentCheckboxgroup”).selectedIndices;
let selectedmuscleGroup = $w(“#muscleGroupcheckboxgroup”).selectedIndices;
// Now, loop through the checked items and add each field to the array
if (selectedppl.length > 0){
for ( var i = 0; i < selectedppl.length; i++) {
ppl.push($w(‘#pushPullcheckboxgroup’).options[selectedppl[i]].value);
}
}

if (selectedexerciseType.length > 0){
for ( var i2 = 0; i2 < selectedexerciseType.length; i2++) {
exerciseType.push($w(‘#exerciseTypecheckboxgroup’).options[selectedexerciseType[i2]].value);
}
}

if (selectedequipmentType.length > 0){
for ( var i3 = 0; i3 < selectedequipmentType.length; i3++) {
equipmentType.push($w(‘#equipmentCheckboxgroup’).options[selectedequipmentType[i3]].value);
}
}

if (selectedmuscleGroup.length > 0){
for ( var i4 = 0; i4 < selectedmuscleGroup.length; i4++) {
muscleGroup.push($w(‘#muscleGroupcheckboxgroup’).options[selectedmuscleGroup[i4]].value);
}
}
$w(“#trainingDataset”).setFilter(wixData.filter()
.hasSome(“ppl”, ppl)
.hasSome(“exerciseType”, exerciseType)
.hasSome(“equipmentType”, equipmentType)
.hasSome(“muscleGroup”, muscleGroup)
);
} else {
$w(“#trainingDataset”).setFilter(wixData.filter()
);
}
}

export function pushPullcheckboxgroup_change(event) {
FilterByExercise();
}

export function exerciseTypecheckboxgroup_change(event) {
FilterByExercise();
}

export function equipmentCheckboxgroup_change(event) {
FilterByExercise();
}

export function muscleGroupcheckboxgroup_change(event) {
FilterByExercise();
}

tony-brunsman · April 27, 2019, 2:16pm

@fraser You don’t necessarily need that if statement. So, the end of that function is

 $w("#trainingDataset").setFilter(wixData.filter() 
    .hasSome("ppl", ppl) 
    .hasSome("exerciseType", exerciseType) 
    .hasSome("equipmentType", equipmentType) 
    .hasSome("muscleGroup", muscleGroup) 
   );

There’s potential for some conflicting logic between filtering these particular groups. That’s for you to sift out. I’m just trying to assist by showing a way to code it. I’m going to be off line for most of the day here in California.

fraser · April 27, 2019, 2:20pm

@tony-brunsman were so close when i comment out the first if and test second even that works perfectly too, its just they won’t all seem to work together.

If i take out the else when i uncheck boxes the filter won’t reset

RIGHT i just found something if you put at least one check in each column the filter runs ! and works however i may just want it to show me all push exercises for example and leave last 3 columns empty… how do we cater for that?

really appreciate your help mate and know it must be a pain for you helping us idiots lol

fraser · April 28, 2019, 5:18pm

@tony-brunsman Thanks for your help on this ! its good enough to use i have to check at least one box in each column to make it work would be nice if i could just tick one thing if i wanted and see all these results but hey ho.

again many thanks

tony-brunsman · April 28, 2019, 7:22pm

@fraser I’m sure there is a way to do it, but to test it, I would have to have your exact setup. There is a lot of time involved with doing that.

I applaud your diving in there and learning something new. I’m guessing that you are used to pushing your limits with weight-training.

fraser · June 12, 2019, 9:11am

bump @tony-brunsman can we re look at this please ? i really need to have this so that the drop down filters even if just one item in 1 checkbox group is ticked.

Example i tick push and i click drop down and i see all push exercises then i choose to click pull and i see all push pull exercises but no leg exercises and so on for all other check boxes, is that something you could help me with ive been trying and trying but im not good enough.

appreicated

tony-brunsman · June 13, 2019, 5:34am

Hey Fraser,

There’s a lot going on here, and it’s difficult to know what to suggest in order to get it functioning the way you hope.

fraser · June 17, 2019, 7:41am

@tony-brunsman Solved thanks for your help anyway

//Exercise filter
export function FilterByExercise(){
let ppl = ;
let exerciseType = ;
let equipmentType = ;
let muscleGroup = ;

// Get the indexes of all the checkboxes checked in that group
let selectedppl = $w(“#pushPullcheckboxgroup”).selectedIndices;
let selectedexerciseType = $w(“#exerciseTypecheckboxgroup”).selectedIndices;
let selectedequipmentType = $w(“#equipmentCheckboxgroup”).selectedIndices;
let selectedmuscleGroup = $w(“#muscleGroupcheckboxgroup”).selectedIndices;
let filter = wixData.filter();

// Now, loop through the checked items and add each field to the array and apply filter
if (selectedppl.length > 0){
for ( var i = 0; i < selectedppl.length; i++) {
ppl.push($w(‘#pushPullcheckboxgroup’).options[selectedppl[i]].value);
}
}
if (ppl.length > 0) {
filter = filter.hasSome(“ppl”, ppl);
}

if (selectedexerciseType.length > 0){
for ( var i2 = 0; i2 < selectedexerciseType.length; i2++) {
exerciseType.push($w(‘#exerciseTypecheckboxgroup’).options[selectedexerciseType[i2]].value);
}
}
if (exerciseType.length > 0) {
filter = filter.hasSome(“exerciseType”, exerciseType);
}

if (selectedequipmentType.length > 0){
for ( var i3 = 0; i3 < selectedequipmentType.length; i3++) {
equipmentType.push($w(‘#equipmentCheckboxgroup’).options[selectedequipmentType[i3]].value);
}
}
if (equipmentType.length > 0) {
filter = filter.hasSome(“equipmentType”, equipmentType);
}

if (selectedmuscleGroup.length > 0){
for ( var i4 = 0; i4 < selectedmuscleGroup.length; i4++) {
muscleGroup.push($w(‘#muscleGroupcheckboxgroup’).options[selectedmuscleGroup[i4]].value);
}
}
if (muscleGroup.length > 0) {
filter = filter.hasSome(“muscleGroup”, muscleGroup);
}

$w("#trainingCollectiondataset").setFilter(filter) 
    .then(() => { 
        console.log("count after", $w("#trainingCollectiondataset").getTotalCount()); 
        $w("#numberOfexercisesinputbox").value = "Number of exercises available"+ " " + $w("#trainingCollectiondataset").getTotalCount() 

    }) 

    . **catch** ((err) => { 
        console.log(err); 
    }); 
}

// Filetr each time you click a check box in a group
export function pushPullcheckboxgroup_change(event) {
FilterByExercise();
}

export function exerciseTypecheckboxgroup_change(event) {
FilterByExercise();
}

export function equipmentCheckboxgroup_change(event) {
FilterByExercise();
}

export function muscleGroupcheckboxgroup_change(event) {
FilterByExercise();
}

// Filter one last time on click of the drop down
export function exerciseDropdown_click(event) {
FilterByExercise();
}

amar97dwarka · August 23, 2019, 3:12pm

Hi i have begin with coding and have seen your website. i have make a similar website but i cannot code the reset button can you help me with that.

thank you

1425club66601 · November 8, 2019, 4:14pm

does anyone know how to sort checkboxes from a database by ascending. I can’t seem to put the code in the correct place.

import wixData from 'wix-data';

$w.onReady(function () {

    $w.onReady(() => {
        wixData.query('linkCategories2')
            .find()
            .then(res => {
 let options = [];
                options.push(...res.items.map(category => {
 return { 'value': category.categoryName, 'label': category.categoryName };
                }));
                $w('#checkboxGroup1').options = options;
            }
    });
});

tony-brunsman · November 8, 2019, 7:54pm

import wixData from 'wix-data';

$w.onReady(function () {

    $w.onReady(() => {
        wixData.query('linkCategories2')
            .ascending('categoryName')
            .find()
            .then(res => {
              let options = [];
                options.push(...res.items.map(category => {
             return { 'value': category.categoryName, 'label': 
               category.categoryName };
                }));
                $w('#checkboxGroup1').options = options;
            }
    });
});

Topic		Replies	Views
Filtering dataset with checkbox groups into repeater Ask the community code , question	15	1465	June 21, 2020
Multiple Checkbox filter Ask the community code , question	4	351	July 20, 2020
(SOLVED) Filter dataset from group check boxes and update a dropdown box with that filter Ask the community code , question	14	764	June 17, 2019
Code not Filtering Dataset Properly with checkbox groups Ask the community code , question	2	138	June 5, 2020
Filter checkboxgroup fed from collection Ask the community code , wix-forms , question	1	92	February 25, 2023

(SOLVED) Multiple group check boxes to filter a dataset and filter / update a drop down

Related topics