Repeater and checkbox

Ask the community
,
1

Hello,
I am building an image gallery using the repeater and checkboxgroups. However, I have several problems:

  • When no box is checked, there is no result for the query. I would like that when no box is checked, all the data of my database is displayed.

  • The different checkboxes are additional except I would like them to be optional. For example, the client can filter with checkbowx 1 OR 2 OR 3…

Here is my code:

import wixData from 'wix-data';

$w.onReady(function () {
    filterView();
    $w("#checkboxGroup1").onChange( (event, $w) => {
      filterView();
    });
    $w("#checkboxGroup2").onChange( (event, $w) => {
      filterView();
    });
    $w("#checkboxGroup3").onChange( (event, $w) => {
      filterView();
    });
});

function filterView(){
    var categorieFilter = $w("#checkboxGroup1").value
    var solFilter = $w("#checkboxGroup2").value
    var vetementFilter = $w("#checkboxGroup3").value

    console.log('categorie', categorieFilter);
    console.log('themeSolMur', solFilter);
    console.log('typeDeVetement', vetementFilter);
    
    $w("#dataset1").setFilter( wixData.filter()
    .hasSome("categorie", categorieFilter)
    .hasSome("themeSolMur", solFilter)
    .hasSome("typeDeVetement", vetementFilter)
    )
    ;
}

The page : https://animal-crossing-nh.wix.com/astuces/copy-of-motifs

The repeater on the publisher’s side:

1374×605 223 KB

Also, is there a way to sort the repeater data? (alphabetical order, date added…).
Thanks for your help :blush:

2

Use or() Like:

function filterView(){
const values = {
categorie: $w("#checkboxGroup1").value,
themeSolMur: $w("#checkboxGroup2").value,
typeDeVetement: $w("#checkboxGroup3").value
};
let filter = wixData.filter();
let i = 0;
Object.keys(values).forEach(k => {
if(values[k]){
filter = i === 0 ? filter.hasSome(k, values[k]) : filter.or(wixData.filter().hasSome(k, values[k]));
i++;
}
})
$w("#dataset1").setFilter(filter);
}

Edit: changed “key” to “k”. pay attention.

3

Oh I like this method for getting “or” into the filter. Thanks for the addition!

4

Hi ! Thank you !
The code is functionning ! If i want to test with additionnal filter, (use “and” rather than “or” as Amanda advised), what should I modify?
I tried replacing “or” with “and” but it didn’t work.

5

Hello! I just checked your url and I spoke in error. The way you are doing this is returning as expected. Apologies!