Nesting forEachItem with for problem

Ask the community
,
1

I tried to nested repeater forEachItem function with for. But, when i do that, it seems like forEachItem don’t run syncronously. I tried using async await function but no luck

$w("#repeater1").forEachItem(($item, itemData, index) => {

const commentId = itemData._id;
console.log(comment.id); //this line will run for every item in repeater(5 times for 5 item)

//and then the code below will run (5 times for 5 item)
wixData.query('commentReply')
    .eq('commentId', commentId)
    .find()
    .then((result) => {
    console.log(result);
    for (let i = 0; i < result.length; i++) {
        let texti = $w('#reply' + (i + 1));
        texti.expand();
        texti.text = '';
        texti.text = result.items[i].reply;
        console.log(texti.text);
        }
    })
}

How can i make code that will run syncronously for every step?

2

Hi Alfon,

If I’m understanding what you are trying to do, it seems that you are wanting to display data from two different collections. When you run multiple queries like this within a forEachItem, there surely is some lag time (waiting for the results from the server) affecting the execution of this code.

When I’ve wanted to do something similar to this, I’ve nested queries asynchronously in a separate async function, and then assigned the resulting array of arrays to the repeater. When looping through it in a forEachItem or onItemReady function, the commentReply array for each of these would be available in the itemData array.

3

Hi Anthony,

Thankyou for your time helping me out. I’ve made function like this. But it don’t seems to work for me. Am I made some mistake?

$w("#repeater1").forEachItem(async ($item, itemData, index) => {

let queries = await querying($item, itemData, index);
if (queries) {
    for (let i = 0; i < queries.length; i++) {
        let texti = $w('#reply' + (i + 1));
        texti.expand();
        texti.text = queries.items[i].reply;
        console.log(queries.items[i].reply);
        }
     }
})
async function querying($item, itemData, index) {
    let commentId = await itemData._id;
    console.log(commentId);
    return await wixData.query('commentReply')
    .eq('commentId', itemData._id)
    .find();
}
4

await in forEach doesn’t work unless you do something like this
https://codeburst.io/javascript-async-await-with-foreach-b6ba62bbf404

To populate data in your repeater use:

$w("#repeater").onItemReady(($item, itemData, index) => {
//your code
}

and afterwards have it populated by

$w("#repeater").data = someArray;
5

Alton, maybe I wasn’t clear enough with the suggestion. What I meant was to have a separate async function outside the forEachItem function of the repeater and have it run prior to populating the repeater.

How are you initially populating the repeater? If it’s via a dataset, what collection is it connected to? In other words, what _id value are you using as a basis for the query on the collection ‘commentReply’?

6

Thankyou thankyou very much @tony-brunsman @Tom I just found that I wrong when putting $w with $item. And it do works even when the console.log not showing syncronous function. So I got what I want for now