How to wait till async call executes in foreach loop JavaScript?

Question

I have table as below

<table id="mytbl">
  <tr><td><button class="payoutBtn" onclick="payToSingle(1,2,5);">Pay</button></td></tr>
  <tr><td><button class="payoutBtn" onclick="payToSingle(5,8,5);">Pay</button></td></tr>
  <tr><td><button class="payoutBtn" onclick="payToSingle(7,2,5);">Pay</button></td></tr>
  <tr><td><button class="payoutToAllBtn" onclick="payToMultiple();">Pay To All</button></td></tr>
</table>

I am triggering call to single button in below function and awaiting but its not waiting

async function payToMultiple(){
    var selected_rows = $('#mytbl tbody tr').length;    
    if(selected_rows > 0){
        var $active_rows = $("#mytbl").children('tr')               
        console.log('Start')
        $active_rows.each(async function() {
            var targetElement = $(this).find('.payoutBtn');
            await targetElement.trigger("click");                   
        });
        console.log('End')  
    } 
}

payToSingle() function on each click is wortking fine but when I click on "Pay to all" only first payment is getting successful not all.

async function payToSingle(param1,param2,paramN){
    console.log("payToSingle() called..!");
    //multile async calls goes here
    await server.loadAccount(param1)
    await makePayment1(param1,param2);
    await makePayment2(param3);
    return;
}

UPDATE :

Hi referred duplicate question Using async/await with a forEach loop as suggested and made below changes now code is working.

HTML :

<table id="mytbl">
      <tr>
        <td class="param1">1</td>
        <td class="param2">2</td>
        <td class="param3">5</td>
        <td><button class="payoutBtn" onclick="payToSingle(this);">Pay</button></td>
      </tr>
      <tr>
        <td class="param1">5</td>
        <td class="param2">8</td>
        <td class="param3">5</td>
        <td><button class="payoutBtn" onclick="payToSingle(this);">Pay</button></td>
      </tr>
      <tr>
        <td class="param1">7</td>
        <td class="param2">2</td>
        <td class="param3">5</td>
        <td><button class="payoutBtn" onclick="payToSingle(this);">Pay</button></td>
      </tr>     
      <tr><td><button class="payoutToAllBtn" onclick="payToMultiple();">Pay To All</button></td></tr>
    </table>

Updated mutiplepayout function

async function payToMultiple(){
        var targetElements = [];
        var selected_rows = $('#mytbl tbody tr').length;    
        if(selected_rows > 0){
            var $active_rows = $("#mytbl").children('tr')                           
            $active_rows.each(async function() {
                var targetElement = $(this).find('.payoutBtn');
                targetElements.push(targetElement);                 
            });                 
        } 

        for(var i=0;i<targetElements.length;i++){
            const result =  await payToSingle(targetElements[i]);
        }
    }

Updated single payout function :

async function payToSingle(element){
        console.log("payToSingle() called..!");
        var currentrow = $(element).parent().parent();
        var param1 = $(currentrow).find(".param1").text();
        var param2 = $(currentrow).find(".param2").text();
        var param3 = $(currentrow).find(".param3").text();
        //multile async calls goes here
        await server.loadAccount(param1)
        await makePayment1(param1,param2);
        await makePayment2(param3);
        return;
    }

Your code is `awaiting` a click trigger, which in itself is not a promise. async functions can only await promises. You'll need to restructure your code, perhaps by attaching a click event listener and assigning a callback, then awaiting this so that you are awaiting a promise. Also, you don't need the nested `async` declarations. — silencedogood, Aug 26 '19 at 13:30

score 1 · Answer 1 · answered Aug 26 '19 at 12:55

1

If you need to wait until all your async functions return, you might probably want to wrap it into Promise.all:

  await Promise.all($active_rows.map(/* your async functions go there */))

Note though, that it will only resolve if ALL of the promises in the array resolve

answered Aug 26 '19 at 12:55

Yanis

4,847
2
17
17

still its not waiting – dev Aug 26 '19 at 13:29
Are you doing it like this? ``` await Promise.all($active_rows.map(async function() { var targetElement = $(this).find('.payoutBtn'); await targetElement.trigger("click"); })); ``` – Yanis Aug 26 '19 at 13:30
Yeah doing same – dev Aug 26 '19 at 13:38
Yanis Thanks for help – dev Aug 28 '19 at 05:06

How to wait till async call executes in foreach loop JavaScript?

1 Answers1