I'm working on a small application where we basically have groups, sub-groups and members of the sub-groups. The group in this case are the Risk Areas which are basically 3 in number. Given IDs of 1,2 and 3 respectively. Each of the risk areas have sub-groups which are called family Units and for each family unit, there're family members. A risk area could have about 127 Family units each with its respective members.
I'm having the challenge of retrieving family members grouped under each family units. I get results but most of them are undefined. In a case where a Risk Area has 127 family units, I'm only able to retrieve about 24 family units with their members with over 100 undefined. Below is my controller
My Controller
.controller('familyRiskCtrl', ['$scope', 'familydataService', '$routeParams', function ($scope, familydataService, $routeParams) {
$scope.familysR = [];
$scope.currentPage = 1;
$scope.itemsPerPage = 5;
getDataRiskArea();
// Gets family by risk area
function getDataRiskArea() {
familydataService.getFamilysByRiskArea($routeParams.id).then(function (result) {
$scope.familyR = result;
console.log(result);
// variable to hold the families
var familyUnit = [];
// Get family by FSU Id (FuId)
angular.forEach(result, function (value, key) {
familydataService.getFamilyByFuId(value.FuId).then(function (resulti) {
var familyResult = resulti;
var FuIds = resulti[key].FuId;
console.log(key);
// Push the array object to families
familyUnit.push({
Id: value.FuId,
FamilyUnitName: value.FamilyUnitName,
Families: familyResult
})
});
});
// console.log(families);
console.log(familyUnit);
$scope.FamilyUnit = familyUnit;
});
}
$scope.sortBy = function (column) {
$scope.sortColumn = column;
$scope.reverse = !$scope.reverse;
};
}])
And below is the service used. When I console logged the results, I realized that the risk area got all the distinct Family Unit Ids but on trying to get members under the distinct family units, It's only able to retrieve a few throwing error for over 70% of the remaining data not pulled.
Please note, I used the value of the angular.forEach() to track the distinct FuIds in the array when was later used to fetch members of the family unit.
My Service
(function () {
'Use Strict'
angular
.module('app')
.factory('familydataService', ['$http', '$q', function ($http, $q) {
var service = {};
// Gets the Family by Risk Area ID
service.getFamilysByRiskArea = function (id) {
var deferred = $q.defer();
$http.get('/Family/FamilyByRisk/' + id).then(function (result) {
deferred.resolve(result.data);
}, function () {
deferred.reject();
});
return deferred.promise;
};
// Get family by FuID
service.getFamilyByFuId = function (id) {
var deferred = $q.defer();
$http.get('/Family/FamilyByFuID/' + id).then(function (result) {
deferred.resolve(result.data);
}, function () {
deferred.reject();
});
return deferred.promise;
};
return service;
}]);
})();
And below is what my console.log looks like
From the above, there're 127 Family Units retrieved by the risk area ID out of which the 24 Family Units with their members were retrieved with the remaining undefined.
