Handling asynchronous calls inside loops

Question

I am working on a angular app, I have a form which takes few rules which are stored under a list called ruleList and then to the backend. In order to show these rules in a page, I am preparing the ruleList again iterating over the ruleList stored in the backend.

The ruleList has a field 'groupByField' which is also a list. When i am iterating over the ruleList preparing the each rule, There is an async operation to prepare the groupByField list. By the time the groupByField list is prepared, The ruleObj is pushed into $scope.ruleList leaving out groupByField. Hence breaking my code. How do i make sure the groupByfield list is pushed into corresponding ruleObj in ruleList.

        $scope.ruleList = [];

        _.each(alertcfg.ruleList, function(rule, index) {
            var ruleObj = { 'selectedIndex':'',                                                             
                            'groupByField':[],
                            'indexFields':[]
                      }

            if ( rule.selectedIndex != '' ) {

                //async calls
                courier.indexPatterns.get(rule.selectedIndex).then(function(current_index) {   
                   var fields = current_index.fields
                   rule.indexFields = fields
                   _.each(rule.indexFields, function(field) {

                      _.each(rule.groupByField, function(grp_by_field) {                              
                          if(grp_by_field.name === field.name)
                          {
                              ruleObj.groupByField.push(grp_by_field);
                          }

                      });
                   });
              })
            }
            $scope.ruleList.push(ruleObj);
            $scope.operRuleList.push(operRuleObj);
        });

Possible duplicate of [JavaScript closure inside loops – simple practical example](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — VLAZ, Sep 01 '16 at 19:47

score 0 · Accepted Answer · answered Sep 01 '16 at 20:16

your ruleObj insert is outside of the promise then block, move it inside:

//async calls
courier.indexPatterns.get(rule.selectedIndex).then(function (current_index) {   
  var fields = current_index.fields;
  rule.indexFields = fields;
  _.each(rule.indexFields, function(field) {
    _.each(rule.groupByField, function(grp_by_field) {                              
      if (grp_by_field.name === field.name) {
        ruleObj.groupByField.push(grp_by_field);
      }
    });
  });
  $scope.ruleList.push(ruleObj);
});

if you need to push default empty ruleObj in case of ajax failure, use second param in then block:

//async calls
courier.indexPatterns.get(rule.selectedIndex).then(function (current_index) {   
  var fields = current_index.fields;
  rule.indexFields = fields;
  _.each(rule.indexFields, function(field) {
    _.each(rule.groupByField, function(grp_by_field) {                              
      if (grp_by_field.name === field.name) {
        ruleObj.groupByField.push(grp_by_field);
      }
    });
  });
  $scope.ruleList.push(ruleObj);
}, function (err) {
  // ajax failure case
  $scope.ruleList.push(ruleObj);
});

Handling asynchronous calls inside loops

1 Answers1