$http promise is not waiting to finish loop inside of it

Question

I was trying to run AngularJS forEach loop inside a $http request where as promise is not waiting to complete the loop and before that its returning.

Please find my code below:

return $http({
    method: 'GET',
    url: $rootScope.baseUrl + 'test/test/test/test',
    headers: {
      "token": token
    }
  })
  .then(function(responce) {
    var dashboardCheck = function() {
      var defer = $q.defer();
      angular.forEach($rootScope.getDashboardDetails.dashboardList, function(value, key) {
        if (value.name == "Dashboard" && value.contentDashboard == true) {
          //return value;
          defer.resolve(value);
        }
      })
      return defer.promise;
    }
    var availableDashboard = function() {
      return $rootScope.getDashboardDetails.dashboardList[0];
    }
    var defaultDash = function(value) {
      method goes here
    }
    if (dashboardCheck()) {
      defaultDash(dashboardCheck());
    } else {
      defaultDash(availableDashboard())
    }
  })

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. — Deblaton Jean-Philippe, Dec 13 '17 at 16:28
Several problems here: 1. `if (dashboardCheck())` returns a promise object which will always be truthy and then you run the same loop again by calling the same function 2. Your `then()` doesn't have a `return`. Also not clear what `defaultDash ()` does or returns — charlietfl, Dec 13 '17 at 17:18

score 1 · Accepted Answer · answered Dec 13 '17 at 19:33

You seem to make everything way more complicated than it should be, you want to find a certain dashboard and if not find just return the first.

There is no async code after making the request and you don't do anything with the request so I'm not sure why you're making it in the first place.

The much simpler version of what you're trying to do would be this:

return $http({
    method: 'GET',
    url: $rootScope.baseUrl + 'test/test/test/test',
    headers: {
      "token": token
    }
  })
  .then(function(responce) {
    var scopeDashboard = $rootScope.getDashboardDetails.dashboardList;
    var dashboard = 
      //not sure why need to return a defer here, no async code provided
      scopeDashboard.filter(
        dashboard=>
          dashboard.name == "Dashboard" && dashboard.contentDashboard == true
      )[0] || scopeDashboard[0];
      // if scopeDashboard is an object try this
      // scopeDashboard[
      //   Object.keys(scopeDashboard)
      //     .filter(
      //       key=>
      //         scopeDashboard[key].name == "Dashboard" && 
      //           scopeDashboard[key].contentDashboard == true
      //     )[0] || 0
      //   ];
    return [dashboard,response];
  })
  .then(
    ([dashboard,response])=>{
      //you now have the response and dashboard, what would you like to do with it?
    }
  )
  .catch(
    err=>console.error("something went wrong",err)
  )

$http promise is not waiting to finish loop inside of it

1 Answers1