Angular.js factory: Handle $http asynchronously

February 20, 2015

The problem:

When I was using $http service to get data from a remote API, my code below was not able to return data back to the controller.

    myApp.factory('myFactory', function($http){
      var data = { anArray:[] };

      $http.get('/api').success(function(data) {
        data.anArray.push(data);
      });

      return data;
    });

This is because the return data is already executed before the $http get request finish pushing data into the array.

My solution:

In order to handle data asynchronously, the controller needs to tell the service what to do when the data is received later:

    myApp.factory('myFactory', function($http){
      return {
        getData: function(){
          return $http.get('/api');
        } };
      });

    myApp.controller('MyController', ['$scope', 'myFactory', function($scope, myFactory) {
      $scope.data = [];

      var handleSuccess = function(data, status){
        $scope.data = data;
      };

      myFactory.getData().success(handleSuccess);
    }

Let me know if you have any questions ☺


Profile picture

Experience in software development, application architecture, and deploying cloud solutions for enterprise customers. Strong hands-on skills with a Master's degree in Computer Science and business acumen with a master of business administration (MBA) in Finance. Certified in Amazon Web Services (AWS), Google Cloud Platform (GCP), Microsoft Azure, Kubernetes (CKA, CKAD, CKS, KCNA) and Scrum (PSM, PSPO) with experience in building banking products from scratch. Connect on Linkedin

© 2022, @victorleungtw