filtering a DataSet in Wix Code

Ask the community
,
1

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?

2

Hi,
Your code looks ok.
Roi.

3

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?

4

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.

5

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.

6

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?

7

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…

8

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

9

Still stuck on this as well!

10

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

@erx214 Thanks for updating us!!

12

@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

13

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 ?

14

@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.