As a beginner in angularjs, my objective is straightforward. I aim to execute an ajax request to fetch data and, upon completion, I want to initiate a second call to retrieve another set of data based on the information from the initial set.
To achieve this, I am utilizing promise mechanisms to enable chaining instead of nesting ajax calls. This helps in maintaining independent functions that can be linked together as needed.
Here is a snippet of my code:
var promiseGetWorkTypes = function ($q, $scope, $http) {
console.log("promiseGetWorkTypes");
return $q(function (resolve, reject) {
$http({
method: 'GET',
url: '/WorkTypes'
}).then(
function (payload) {
console.log("Got workttypegroups")
console.log(payload);
$scope.WorkTypeGroups = payload.data;
console.log("End of worktypegroups");
resolve(payload);
},
function (payload) {
reject(payload);
});
});
};
var promiseGetRecentActivities = function ($q, $scope, $http) {
console.log("promiseGetRecentActivities");
return $q(function (resolve, reject) {
$http({
method: 'GET',
url: '/RecentHistory'
}).then(
function (payload) {
$scope.RecentActivities = payload.data;
resolve(payload);
},
function (payload) {
reject(payload);
});
});
};
var index = angular.module("index", []);
index
.controller('EntitiesController', function ($scope, $http, $timeout, $q) {
promiseGetWorkTypes($q, $http, $scope)
.then(promiseGetRecentActivities($q, $http, $scope));
}However, upon checking my debug console, I noticed that the call to "promiseGetRecentActivities" is starting before the completion of the Ajax handling for "promiseGetWorkTypes".
What could be the issue or mistake in my approach here?