Run function after async method in for loop is completed

Question

I have this function updateSecondTable in the function I have a for loop that calls a service every time I want to run this.updateMainTable(); after the for loop is done how can I accomplish this goal. I have tried many things I have added a wait. I tried adding the () => in the subscribe method and then calling the method this.updateMainTable(); but it does not work I tried adding a callback in the function. I have looked and many examples but do not understand how to implement them in my case. Thank you for your help.

  updateSecondTable() {
    var table = $('#dtPurchaseReceptionsConfirmed').DataTable();
    table.clear().draw();

    for (var i = 0; i < this.lstPurchasesRecived.length; i++) {
      this.purchaseService.getPurchase(this.lstPurchasesRecived[0]).subscribe(data => {
        if (data) {
          var contractNumber;
          if (data.contract != null || data.contract != undefined) {
            contractNumber = data.contract.contractNumber;
          }
          else {
            contractNumber = "";
          }

          table.row.add([data.supplier.name, contractNumber, data.orderNumber, data.supplierOrderNumber, data.component.brand, data.component.designation, data.component.type, data.component.reference, data.term, data.orderQuantity, data.deliveredQuantity, data.unitPrice, data.orderQuantity]).draw(false);
        }
      });
    }
    this.updateMainTable();
  }

And here is the function this.updateMainTable.

  updateMainTable() {
    var mainTable = $('#dtPurchaseReceptions').DataTable();
    mainTable.ajax.reload(null, false);

    var rows = mainTable.rows().nodes();

    //Remove all lstPurchases checkboxes
    for (var i = 0; i < this.lstPurchases.length; i++) {
      $('input[type="checkbox"]', rows).prop('checked', false);
    }
    //Check all select purchases
    for (var i = 0; i < this.lstPurchasesRecived.length; i++) {
      for (var j = 0; j < rows.length; j++) {
        if (this.lstPurchasesRecived[i] == Number(rows[j].id)) {
          $('input[type="checkbox"]', rows[i]).prop('checked', true);
        }
      }
    }
  }