Repeater only shows first three items (SOLVED)

Ask the community
,
1

I have a repeater that is populated by code - not connected to a dataset. The code posted below produces a query that provides data for the repeater. This works perfectly except for only showing the first three items.

I have tried the Viweport approach to try to load more items as you scroll down. Can’t get that to work. However, if I connect the repeater to a dataset through the GUI I can get it to load all the items using the Viewport idea.

Several reasons for using a query rather than connecting using the GUI. The main reason is that I am using a reference field and the query allows me to connect and use elements from the referenced dataset. Also, I want to use the query idea in more complex situations elsewhere in the site.

Can anyone help me figure out how to load more items when scrolling down through the repeater? Thank for any ideas.

import wixData from ‘wix-data’ ;

$w.onReady( async function () {
let result = await wixData.query( “Projects2” )
.include( “categoryId” )
.eq( “projectsInclude” , true )
.limit( 30 )
.find()
await connectRepeater(result.items)
});

function connectRepeater(repeaterItems) {
$w( ‘#repeater1’ ).forEachItem(($w, itemData, index) => {
// connect each repeater item elements to their data from repeater data
$w( ‘#text14’ ).text = repeaterItems[index].projectName
$w( ‘#text12’ ).text = repeaterItems[index].projectDescription
$w( ‘#text44’ ).text = repeaterItems[index].projectDetails
$w( ‘#text13’ ).text = repeaterItems[index].categoryId._id
$w( ‘#text42’ ).text = repeaterItems[index].categoryId.categoryName
$w( ‘#text43’ ).text = repeaterItems[index]._id
$w( ‘#image5’ ).src = repeaterItems[index].image1
})
}

export async function columnStrip9_viewportEnter(event) {
// This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com
// Add your code for this event here:
$w( “#image9” ).show(); //This is your GIF or animated image
await wixData.query( “Projects2” ).find() //This is your dataset
.then(() => {
$w( “#image9” ).hide(); //This is your GIF or animated image
});
}

2

Quick question: Have you remembered to sync the database from Sandbox to Live and vice versa?

3

Yes. I have pages that use the GUI approach and they work on the live site and in sandbox/edit mode. Just trying to develop an understanding of how to do this on a simple repeater based on a query to be used elsewhere in the site.

4

@royecollins When populating repeaters with wixData.query, there are several steps involved.

The first thing to do is to assign the query results to the data property of the repeater. There are several ways to get the repeater elements assigned the appropriate data. I prefer using the onItemReady function to accomplish what your connectRepeater function is aiming to do.

You’re not really gaining anything by using async here. The .then function will ensure that the repeater data will be assigned only when the query results have been obtained.

import wixData from 'wix-data';
$w.onReady(function () { 
    wixData.query("Projects2")    
    .include("categoryId")    
    .eq("projectsInclude",true)    
    .limit(30)    
    .find()
    .then((result) => {
        $w('#repeater1').data = result.items;
    }) 
    $w("#repeater1").onItemReady( ($item, itemData, index) => {
        $item('#text14').text = itemData.projectName;
        $item('#text12').text = itemData.projectDescription;
        $item('#text44').text = itemData.projectDetails;
        $item('#text13').text = itemData.categoryId._id;
        $item('#text42').text = itemData.categoryId.categoryName;
        $item('#text43').text = itemData._id;
        $item('#image5').src = itemData.image1;
    });     
});

By using the $item (instead of $w) notation for all of those text elements, you are specifying that each repeated item gets the unique values of that item or row. There is a thorough explanation of this in the introduction of the repeater documentation.

5

Thanks anthonyb! That worked perfectly.