Below is the JavaScript code that I am using. When I click the button, it calls the function btnInitiateAPICall() which makes the first API call to get the number of users. However, my code does not wait for the first API call to finish before moving on to the InitiateSecondAPI call. Can someone help me correct my code so that it waits for the first API call to complete before proceeding with the secondAPIcall?
<button type="submit" class="btn btn-primary left" id="btnSubmit"
ng-disabled="working" ng-click="btnInitiateAPICall()">
submit
</button>
<img width="30" height="30" class="progressgif" style="display:none"
alt="spinner" src="../Images/spinner.gif">
$scope.btnInitiateAPICall = function () {
if ($scope.selection == '' || $scope.selection == undefined) {
alert("Please select one option from dropdown");
return;
} else {
var count=FetchNumberOfMatchingUsers($q, $http) //this call should wait until the count is returned before it goes to next line
InitiateSecondAPICall(count);
}
}
function FetchNumberOfMatchingUsers($q, $http) {
console.log("starting FetchNumberOfMatchingUsers");
$('.progressgif').show();
return $http.post("/api/UserRecords/GetUserCount", {
Instance: $scope.selection,
}).then(
function (response) {
$scope.count = 0;
$scope.count = response.data;
return response.data;
}
).catch(
function (response) {
return $q.reject(response);
});
$('.progressgif').hide();
}