Waiting for multiple datasets loading to finish

Ask the community
,
1

Hello,
I have 3 datasets on a page.

  1. main dataset that is filtered by code using brought item id from local storage session:
$w("#dataset3").setFilter(wixData.filter().eq("_id", session.getItem("sessionId")));
  1. two datasets that are filtered by the main dataset referenced item
    the page is presenting values from the two datasets that has been filtered by referenced items from the main dataset.
    my issue is that i can’t find a way to wait until the secondary datasets are finished to load the filtered items, the onReady() is passing before it happends.
    here is a screen shot of how it’s configured:

1297×754 74 KB

Will appreciate for help, maybe i should take different approach as-well
Thanks!

2

Hey Valor :raised_hand_with_fingers_splayed:

Actually it’s quite easy, you just need to wait until each dataset is ready then attempt to filter the next one, here’s a short example:

// The page's on ready function
$w.onReady(() => {
    // Wait for the main dataset to load.
    $w('#dataset1').onReady(() => {
        const mainItem = $w('#dataset1').getCurrentItem();
        
        // Now filter the second dataset:
        // Wait for the second dataset to finish loading
        $w('#dataset2').onReady(() => {
            // Prepare the filter;
            const filter = wixData.filter().eq('id', mainItem._id);
            
            // Apply the filter on the second dataset
            $w('#dataset2').setFilter(filter).then(() => {
                // Get the filtered item from dataset2
                const secItem = $w('#dataset2').getCurrentItem();
                
                // Now filter the third dataset:
                // Wait for the third dataset to finish loading
                $w('#dataset3').onReady(() => {
                    // Prepare the filter;
                    const filter2 = wixData.filter().eq('id', secItem ._id);
                    
                    // Apply the filter on the second dataset
                    $w('#dataset3').setFilter(filter).then(() => {
                        // Get the filtered item from dataset3
                       const secItem = $w('#dataset3').getCurrentItem();
                    })
                })
            })
        })
    })
})

As you can see, it’s easy to code, but it’s too complicated to read, and not the most efficient way to get the data, this will hurt the page’s performance and will increase the loading time, therefore hurt your ranking on search engines like Google.

To improve the code and the performance of the page, move the logic to the backend, run all your queries there, and only return one object as the final result.

Hope this helps~!
Ahmad

3

Hi Ahmad, Thanks a lot of the answer!
I have tried to implement the solution you suggested, and i have couple of questions:

  1. Regarding the first dataset that I’m filtering from id that arrives from local storage, how to wait for that?
  2. Regarding the filter that i need to perform to database 2 or database 3, how to filter reference item? it doesn’t seems to work for me
    Thanks!
4

Help Anyone ?