Load More function without dataset

Ask the community
,
1

I have a page that loads data from 2 different databases and combines them in one repeater. Since I’m not using a dataset, how would I add a “load more” function to this should there be additional results than what are initially loaded?

I have a box that uses onViewportEnter that I’ve used on other pages that do have datasets, so I would like to use that as my trigger.

Thanks.

2

Bumping for visibility and if anyone has an answer

3

Can you post your code? There is a few solutions that would work for this.

4 
import wixData from 'wix-data';
import wixLocation from 'wix-location';

$w.onReady(function () {
   
    $w("#listRepeater").onItemReady( ($item, itemData, index) => {

         let count = itemData;
        if (count < 1) {
            $w('#listRepeater').collapse();
            $w('#text89').collapse();
            $w('#box3').collapse();
            $w("#image1").collapse();
            $w('#text90').show();
        }

        if(itemData.title){
            $item("#text216").text = itemData.title;
        }else if(itemData.name){
            $item("#text216").text = itemData.name;
        }
                
        if(itemData.name){
            let linkToDynamicPage = itemData["llink-adoptable-dogs-1-title"];
            $w('#button64').onClick(() => {
                wixLocation.to(linkToDynamicPage);
            });
            
        }else if(itemData.title){
            let linkToDynamicPage = itemData["link-adoptable-cats-title"];
            $w('#button64').onClick(() => {
                wixLocation.to(linkToDynamicPage);
            });
        }
        
        $item("#image47").src = itemData.picture;
     } );

    wixData.query("AdoptableCats")
    .eq('foster',true)
    .find()
    .then( (results) => {
        let cats = results.items;
        wixData.query("AdoptableDogs")
        .eq('foster',true)
        .find()
        .then( (results) => {
            let dogs = results.items
            let all = cats.concat(dogs)
            console.log(all)
            $w('#listRepeater').data = all;
            
            // $w('#box3').onViewportEnter( (event) => {
            //     let items = $w("#repeater6").data.length.toString();
            //     $w('#image1').show();
            //     if (+items >= count) {
            //         $w('#image1').hide();
            //         $w('#text214').show();
            //     }else if (+items < count){
            //         $w("#dynamicDataset").loadMore() 
            //         .then( () => {
            //                 $w('#image46').hide();
            //         });
            //     }
            // });
        })
    })
    .catch( (err) => {
        let errorMsg = err;
        console.log(errorMsg)
    } );

});

the commented out code was how it was when using a dataset but I’m not using one for this page

5

Hi @amotor any ideas? thanks so much

6

Here is what I would do in this case. First create two global variables above the onReady function and set both their values to empty arrays.
For the sake of example we will refer to them as the following:

let returnedData = []
let repeaterData = []

When you return the data from the queries and concatinate them into one array you can assign returnedValue as the contactinated array.

Now when you want to render the data to the repeater you can use the following function:

export function populateRepeater() {
    if(returnedData.length > 10) {
        for(let i = 0; i < 10; i++) {
            let indexedItem = returnedData.shift()
            repeaterData.push(indexedItem)
        }
    } else {
        for(let i = 0; i < returnedData.length; i++) {
            let indexedItem = returnedData.shift()
            repeaterData.push(indexedItem)
        }
    }
   $w("#listRepeater").data = repeaterData
}

this function gives you a nice chunk of 10 items that will be pushed to the repeater at one time. Because we are directly mutating global variables their values will remain constant meaning you can easily add a button under the repeater and then bind the onClick handler to this function. When the results are returned just await this function call and your repeater will be populated with the first 10 items, and every time you click the load more button 10 more items will be added to the repeater.

7

Thank you so much!