Updating A Repeater With Code

When populating a repeater using code, a common issue that people experience is that when they update the repeater's data, what's displayed in the repeater is not updated automatically.

To understand why this happens, you need to first understand how a repeater's elements get populated when you set it's data with code.

You set a repeater's data using the data property.

$w('#myRepeater').data = someDataArray;

If that is all you do, the repeater does not know how you want to apply that data to the repeater's elements. That's why, before setting the data, you need to define an onItemReady event handler. For example, you might do something like this:

$w("#myRepeater").onItemReady( ($item, itemData, index) => {  
  $item("#repeatedImage").src = itemData.pic;
  $item("#repeatedText").text = itemData.words;
});

What happens when you later reset the data property?

$w('#myRepeater').data = someOtherDataArray;

Well, it depends. If the new data contains new IDs, the onItemReady handler will run again and everything will work as expected. However, if you've just changed some of the data, but the IDs stay the same, nothing will happen. That's because the repeater only checks IDs when data is set. If an item's ID already exist in the repeater data, it is not considered a new item, and therefore the onItemReady handler does not run.

So what do you do to update the repeater's elements with the new data? That's where the forEachItem comes in. You can run a function on each repeater item to populate it with the new data. So, using the same example as above, if you've updated the pictures in your data, you would code something like this:

$w("#myRepeater").forEachItem( ($item, itemData, index) => {     
  $item("#repeatedImage").src = itemData.pic;
});

BTW - We're locking these posts so that any requests for help with Corvid can be maintained in the Community Discussion section. Please post your questions or feedback there.