(SOLVED) Filter dataset from group check boxes and update a dropdown box with that filter

fraser · May 13, 2019, 6:13pm

HI,

Can any one help me finish this code?

I have a data set called $w(“#trainingDataset”) its a database full of different exercises.

I want to filter the data set using group check boxes. i have it working on the below code with one issue i have to check at least 1 box in each group there are 4 groups that obviously contain multiple check boxes.

pushPullcheckboxgroup
exerciseTypecheckboxgroup
equipmentCheckboxgroup
muscleGroupcheckboxgroup

you can see the check box groups in the photo.

I want it so that it filters each time i click a check box no matter if that’s 1 box or multiple boxes.

for example if i click pull it filters the dropdown to show only the pull exercises.

here’s the code that works but only if at least 1 box is checked in each group.

//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;
// 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) 
); 
}

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

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

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

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

fraser · May 14, 2019, 7:50am

Bump! wheres @Yisreal at lol … very frustrating its so close but not quite there

fraser · June 12, 2019, 8:23am

bump

yisrael-wix · June 12, 2019, 8:48am

Hey @Fraser, here I am. I was hiding under a rock.

Instead of trying to understand it (I’m lazy), could you please explain?

It seems to me that the options selected within each group are ORed, and that the groups themselves are ANDed. Is this in the right direction?

Let me know and I’ll climb out from under my rock.

fraser · June 12, 2019, 9:18am

Hi @yisrael-wix sorry to disturb you from that rock! lol

Im not sure what you mean by that exactly ? i could switch it and test it if you show me how?

Example of what i need: if i tick push then click the drop down id like to see all push exercises. If i then choose to also tick pull then id like to see all push and pull exercises but no legs exercises.

This pattern continues with all other check box groups example if i tick push, legs and machine id like the drop down to show me all the available exercises that you push use your legs on a machine.

That make sense?

yisrael-wix · June 12, 2019, 11:49am

Please post the editor URL of your site. Maybe I’ll understand it if I can play with it. Only authorized Wix personnel can get access to your site in the editor. Please include the name of the page involved.

fraser · June 12, 2019, 12:06pm

https://editor.wix.com/html/editor/web/renderer/edit/a3bb4b98-21ca-45de-9f11-54ab3be9da4c?metaSiteId=25db9593-6438-4449-bce4-da1cba3de62c&editorSessionId=4f964b63-5091-40c2-89c2-89af45b003c1&referralInfo=dashboard

Page name = Training stencil creator v1

Go to the admin page then training stencil creator

yisrael-wix · June 12, 2019, 1:14pm

From what I see, if you have no values for a certain group, it ends up “filtering out” everything.

In the FilterByExercise function, after you get the arrays of option values, you need to “build” your filter.

let filter = wixData.filter();

 if (ppl.length > 0) {
        filter = filter.hasSome("ppl", ppl);
    }
 if (exerciseType.length > 0) {
        filter = filter.hasSome("exerciseType", exerciseType);
    }
 if (equipmentType.length > 0) {
        filter = filter.hasSome("equipmentType", equipmentType);
    }
 if (exerciseType.length > 0) {
        filter = filter.hasSome("muscleGroup", muscleGroup);
    }

    $w("#trainingCollectiondataset").setFilter(filter)
        .then(() => {
            console.log("count after", $w("#trainingCollectiondataset").getTotalCount());
        })
        .catch((err) => {
            console.log(err);
        });

This little bit of code ended up giving me results in the dropdown. I’ll leave the rest to you.

fraser · June 12, 2019, 6:06pm

Thanks @yisrael-wix your a legend,

Any one else whos struggling the below is a code for group check boxes to filter 1 drop down.

//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 filter it.
if (selectedppl.length > 0){
for ( var i = 0; i < selectedppl.length; i++) {
ppl.push($w(‘#pushPullcheckboxgroup’).options[selectedppl[i]].value);
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);
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);
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);
filter = filter.hasSome(“muscleGroup”, muscleGroup);
}
}

$w("#trainingCollectiondataset").setFilter(filter) 
    .then(() => { 
        console.log("count after", $w("#trainingCollectiondataset").getTotalCount()); 
    }) 

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

// Each time you click a check box in the group it filters the dataset i have 4 groups
export function pushPullcheckboxgroup_change(event) {
FilterByExercise();
}

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

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

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

//Drop down button on click makes final filter
export function exerciseDropdown_click(event) {
FilterByExercise();
}

fraser · June 13, 2019, 8:02pm

There is one issue @Yisrael (Wix) I’ve noticed if i select 2 or more in the same checkbox group that it doesn’t show the exercises of the multiple selection it will only show the last box you checked not all checked boxes of that group. any help with that ?

page stencil creator

fraser · June 15, 2019, 10:59am

bump you under the rock again @yisrael-wix lol

yisrael-wix · June 16, 2019, 1:28pm

…yawn, stretch, squint at the bright lights…

You misunderstood my code segment. Sorry, my fault. I should have been more clear.

For each group, you need to build the array of options, and then add that to the filter . Using selectedppl and ppl as an example:

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);
}

You need to do the same thing for each option group.

fraser · June 17, 2019, 7:44am

@yisrael-wix You are officially the man,

//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();
}

yisrael-wix · June 17, 2019, 8:00am

yisrael-wix · June 17, 2019, 8:00am

Guess I should do some pushups.

Topic		Replies	Views
(SOLVED) Multiple group check boxes to filter a dataset and filter / update a drop down Ask the community code , question	16	3777	November 8, 2019
Filtering dataset with checkbox groups into repeater Ask the community code , question	15	1465	June 21, 2020
Use Checkboxgroup to "multi filter" Ask the community code , question	0	147	May 10, 2020
Multiple Checkbox Filtering With Dataset Ask the community code , question	3	1036	June 12, 2019
From checkbox group to dropdown box Ask the community code , question	3	417	October 15, 2019

(SOLVED) Filter dataset from group check boxes and update a dropdown box with that filter

Related topics