Does async function impact function call order for onItemReady function?

Ask the community
, ,
1

Question

The Populate a repeater using static data example in onItemReady() documentation uses async function within onReady function.

Here’s the code from the documentation:

// Static array of objects, each containing a unique `_id` value
const staticData = [
  {_id: '1', language: 'English', greeting: 'Hello World!'},
  {_id: '2', language: 'French', greeting: 'Bonjour monde!'},
  {_id: '3', language: 'Japanese', greeting: 'こんにちは世界！'},
  {_id: '4', language: 'Portuguese', greeting: 'Olá Mundo!'},
  {_id: '5', language: 'Spanish', greeting: '¡Hola Mundo!'},
  {_id: '6', language: 'Ukrainian', greeting: 'Привіт Світ!'}
];

$w.onReady(async function () {
  // Define how to set up each new repeater item
  $w('#helloRepeater').onItemReady( ($item, itemData, index) => {
    $item('#languageText').text = itemData.language;
    $item('#helloText').text = itemData.greeting;
    $item('#indexText').text = (index + 1).toString();

    $item('#itemContainer').onMouseIn( () => {
      $item('#languageText').show();
    });

    $item('#itemContainer').onMouseOut( () => {
      $item('#languageText').hide();
    });
  } );

  console.log(staticData);

  // Set the data to associate with the repeater
  $w('#helloRepeater').data = staticData;
});

Would using async function introduce a risk of onItemReady function running after the data property of repeater is set?

Additional Context

The reason I’m asking is because the onItemReady() documentation states:

Because setting a repeater’s data property triggers the onItemReady() callback to run, make sure you call onItemReady() before you set the data property. Failing to do so will mean that your callbacks (plural?) are not triggered when you set the data property.

It sounds like it’s important to have onItemReady defined/called before data property is set but I’m worried that using async keyword could result in the data property being defined first and onItemReady being defined after the data property is set.

Is it possible that onItemReady is called after the data property is set inside of an async function?

2

All you have to know, is → that your DATA for your repeater has to be prepared (to be ready) first, before you feed your repeater with that data.

The → onItemReady()-function, will be triggered automatically, as soon as you push data to your repeater (feeding of repeater). As soon as data has been pushed into repeater → the onItemReady()-function will be triggered.

This for your structure will look like…

$w.onReady(async()=>{
    
     let someData = await myDoSomeThing_Function();

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

     $w('#myRepeater').onItemReady(($i,iData,i)=>{
          console.log(iData);
          console.log(i);
     });

});


function myDoSomeThing_Function() {
     return some_Values;
}
3

That makes sense and is exactly how I thought it works.

But, what confused me was the documentation saying:

…make sure you call onItemReady() before you set the data property.

It sounds like it is saying that we must:

  1. Somehow “call” onItemReady() on a repeater.
  2. And then set the data property (feed the repeater).

And it’s seems to be saying that it must happen in that order because if it doesn’t happen in that order there will be issues triggering callbacks:

Failing to do so will mean that your callbacks are not triggered when you set the data property.

Do you know what it means to “call” onItemReady()?

4

I would say, forget about that sentence, which makes no sense, or at least is totaly confusing.

Sometimes API-Docs has to be modified a little bit, before they make sense.

The same for the AUTO-COMPLETE-FUNCTION of the Wix-Editor.

Sometimes it will show you errors, which are NO-ERRORS at all.

1 Like
5

Thanks @CODE-NINJA! That helps.

I did some additional digging on this topic. Apparently, the documentation is essentially saying that:

  1. onItemReady is the event listener that is triggered when repeater is populated with data.
  2. If we don’t use onItemReady function and define its callback for a repeater before we populate the repeater with data, then the repeater won’t know what to do with the data it received - items in the repeater won’t get updated with data that was passed to it.

As for the .onReady() callback being asynchronous, it looks like that shouldn’t cause any issues either. Having the callback be async won’t result in onItemReady() being called before the data property is set if it is written in chronological order just like it is in Populate a repeater using static data example that’s shown in onItemReady() documentation.

1 Like