filtering a DataSet in Wix Code

Hi all,

I’ve noticed a diffrence in the result between when I set a filter and sort via the DataSet object in the Wix Editor ans when I set them in Wix Code.

When I set the Sort and Filter on the object in the Wix Editor the filter and sort is applied to the returned items immediatly on page load.

When I set the Sort and Filter in Wix Code, and load the page, everything is returned intially, and after a second or so I see the filter and sort being applied. It could be that i’m not following best practice in my code?

import wixData from 'wix-data';

$w.onReady(function () {
  $w("#dataset").onReady(() => {
    $w("#dataset").setFilter(wixData.filter().eq("published", true));
    $w("#dataset").setSort(wixData.sort().ascending("pubdate"));
    // ...
  });
});

I’m wondering if anyone else has experianced this?

Hi,
Your code looks ok.
Roi.

Thanks Roi. Any ideas why the full dataset seems to load and then filter and sort? Should the filter and sort happen prior to tje dataset being ready?

I suggest hiding the table until filtering and sorting is done.
both filtering and sorting return promises so its fairly easy to wait for both to finish.

Hi Moshe, great suggestion. I had thought about doing this also, however, this adds delays to displaying content that isn’t needed when setting the sort and filter on the dataset object in the editor.

I would love a solution to this issue that doesn’t require hiding elements until the sort and and filter returns, at least, I don’t feel I should have to do this as the developer.

But if this is the only approach I guess i’ll have to go this way.

Hi! I am having the same problem with my site - I have the dataset filtered on some values using the dataset object ui, but I need to filter by date which is only possible in code.

Were you able to come up with a good solution to this?

Is there no way to filter the dataset with code before the page loads “on ready”?

The alternative is coding a “loading” icon and hiding the repeaters until the dataset is filtered? Any tips on how to do this without slowing down the page even more?

1 Like

No, I didn’t come up with a suitable solution. I feel having to show a loading icon or hiding elements leads to poor UX and probably page bounce. I ended up ditching dynamic pages and setting the sort and filter on the dataset objects via the editor. Efficiency dividend lost, but at least it’s a better user experience.

It could be that setting the sort and filter in $w.onReady isn’t the right place, but since nobody from Wix responded, I can only guess…

I have this same issue, did anybody find a solution to this?

Still stuck on this as well!

I actually found a workable solution. I removed the DataSet element which was created through the editor and included the initial connection in the code. So now it won’t do a query unless I call the function in my code.

import wixData from 'wix-data';

function query() {
  let query = wixData.query("CollectionName")
  query = query.limit(50);
  //put here all your query criteria
  query.find()
  .then( (results) => {
    $w("#repeater1").data = results.items;
    }
}
4 Likes

@erx214 Thanks for updating us!!

@jamie You are welcome. Maybe good to mention that I defined my query using “let query =” because I don’t always filter on the same items so I have some if statements included. In the example below I don’t query on when a store is open if the user selected “all” in the day drop-down.

import wixData from 'wix-data';

function query() {
  let query = wixData.query("CollectionName")
  query = query.limit(50);
  if(daySelected !== 'all') { query = query.hasSome("daysOpen", daySelected); }
  //put here additional query criteria
  query.find()
  .then( (results) => {
    $w("#repeater1").data = results.items;
    }
}

If you don’t have that kind of needs then you could do it easier like this for your example:

import wixData from 'wix-data';  

function query() {   
    wixData.query("CollectionName")
        .eq("published", true)
        .ascending("pubdate")
        //put here additional query criteria
        .find()
        .then( (results) => {
            $w("#repeater1").data = results.items;
        });
}

Here you can find some more info: https://www.wix.com/corvid/reference/wix-data.WixDataQuery.html

Erik,
Question 1 : Where do you put your code if you want your repeater or table filled at page opening ?
Question 2 : Removing the dataset in the editor does also remove the relationship between columns and collection fields. So I guess you have to build this relationship somehow (if you use a table at least, as I do), or does the query result array simply fill in the table columns, if they are in the same order ?

@erx214 Thank you for this update, I’m a musician with a bit of coding background but totally newbie with Wix Code, having a Collection of concerts, my goal is to split views, history and next shows. I already managed to set the filter but as @Jamie points I get first the whole list (200) and then the filter by date now() hide correctly the greater or low shows by date. I’ve tried to implement your solution but I get an error that I can only interact with a dataset already declared in the editor.

https://www.vibrandmusic.com/concerts

Here is my code:

import wixData from 'wix-data';
let n = new Date();
function myquery() {
    let query = wixData.query("datasetConcert")
    query = query.limit(3);
    //put here all your query criteria
    query.find()
        .gt("fecha", n)
        .then( (results) => {
        $w("#repeater1").data = results.items;
        });
    }
$w.onReady(function () {
 // I commented that to test your solution
 //   $w("#datasetConcert").setFilter(wixData.filter()
 //    .gt("fecha", n) 
 //   )
 $w("#datasetConcert").onReady( () => {
    myquery();
  } );
});

I get the error even if I didn’t delete the #datasetConcert from the editor.

I would greatly appreciate a full working example, many thanks in advance.