Key Inside For Loop Is Same inside then function - angularjs

Question

$scope.expandPackage = function (node, expanded) {
$scope.expansion=expanded;
var promises = [];
//Check that expand command was clicked and the node's children were not already fetched
if (expanded && !node.childrenFetched) {
//console.log("Call to fetch children");
//node.children = fetchChildren(node.name);
var promise=getPackageHierarchyByPackageId(node.packageId).then(function(){
if( $scope.packageEnabled) {
var featureinstancePromise=FeatureInstanceService.getfeatureInstanceForOrgUnitId(myRow.orgUnitId);
featureinstancePromise.then(function (featureInstance) {
featureInstanceList=featureInstance;
}).then(function(){
prepareListOfFeatureInstance(featureInstanceList,featureList);
for (var key in featureAndFeatInstanceIdMap) {
if (featureAndFeatInstanceIdMap.hasOwnProperty(key)) {
console.log(key + " -> " + featureAndFeatInstanceIdMap[key]);
var enablementPromise=FeatureInstanceService.getEnablementInfo(key);
promises.push(enablementPromise);
enablementPromise.then(function(enablementInfoSuccessResponse){
$scope.featureAndEnablementInfo[featureAndFeatInstanceIdMap[key].displayName]=enablementInfoSuccessResponse;
});
}
}
$q.all(promises).then(function(){
$scope.featureList=featureList;
});
});
}
});
node.childrenFetched = true;
}
};
this.getEnablementInfo = function(featureInstanceId) {
var defer = $q.defer();
$http.get(baseUrl + 'featureInstances/'+featureInstanceId +'/enablementInfo') .
success(function(data, status, headers, config) {
defer.resolve(data);
}).error(function(data, status, headers, config) {
console.log("Error message: " + data.message);
defer.reject(data);
});
return defer.promise;
};
while executing then function it always return same key but the enablementInfoSuccessResponse is fine. My question is how would I know which response is for which key ? Why key is always same ? How I can get rid out of this problem ?

Answer 1

The key is always the same because it is scoped to the then function called after resolving featureinstancePromise. Since promises exist for handling asynchronous code, the for loop keeps on iterating while not caring about when the promise will resolve. This is great but you cannot rely on key being the same since it is updated on every loop.
There are several ways to solve this but the easiest is to move the logic in your loop into a function and pass in the key. That way key will be scoped to that function and won't change underneath you.
function loopWork(key) {
if (featureAndFeatInstanceIdMap.hasOwnProperty(key)) {
console.log(key + " -> " + featureAndFeatInstanceIdMap[key]);
var enablementPromise=FeatureInstanceService.getEnablementInfo(key);
promises.push(enablementPromise);
enablementPromise.then(function(enablementInfoSuccessResponse){
$scope.featureAndEnablementInfo[featureAndFeatInstanceIdMap[key].displayName]=enablementInfoSuccessResponse;
});
}
}
prepareListOfFeatureInstance(featureInstanceList,featureList);
for (var key in featureAndFeatInstanceIdMap) {
loopWork(key);
}