Scope variable not getting data object after http service returns

Question

I'm trying to read list of files on a on a server. The HTTP GET method service returns the list of files, but scope variable in controller is not getting updated with the return value. Can you please help me find what is going wrong ?

app.controller('RdaController', ['$scope', ', 'RdaService', function($scope, RdaService) {
  $scope.listOfFilesOnCTP = "";
 
 $scope.GetListOfFilesonCTP = function(path){
  $scope.$apply(function(){
   $scope.listOfFilesOnCTP = RdaService.getListOfFilesonCTP(encodeURIComponent(path)); 
  });
  //path = path.replace(/\//g, '_');
  console.log($scope.listOfFilesOnCTP);  //--> This scope variable does not get updated.
  return $scope.listOfFilesOnCTP;
 }
}]);

app.service('RdaService', ['$http', function($http) { 
  this.getListOfFilesonCTP = function(path){   
   return $http ({
   method: "GET",
  url: "../api/CTP/getFilesonCTP/"+ path,
  headers: { 'Content-Type': 'application/json' }
  }).success(function(data){
  return data;    //---> contains the expected value
  }).error(function(data){
   return data;
  });
};
}]);

 <div class="col-md-3" id="CTP Jobs">
  <h3>JOBS</h3>
  <table class="table table-striped"
   ng-init="GetListOfFilesonCTP('/home/topas/rda_app/JOBS')"
   ng-model="listOfFilesOnCTP">   <!-- This variable is not updated-->
   <div ng-repeat="file in listOfFilesOnCTP">
    <span><tr>{{file}}
     </tr></span>
   </div>
  </table>
 </div>

Pankaj Parkar · Accepted Answer · 2016-04-11T19:52:14.120

You had mistaken several thing in your code.

Do return only promise returned by $http.get method from service. Because as you are trying to return a data from .success & .error callback of $http method. It will not return data back.
Do use .then function over service method call, on success which will call first function with data returned by $http.
You were expecting to get console.log($scope.listOfFilesOnCTP); to print data returned by service. But this will not return it. Async call are not work in this way. They will return out a data in special manner like promise resolution OR callback manner.
No need to use $scope.$apply here, as digest cycle has been already taken care by $http service.
Try to minimize the use of ng-init, you can do call that method on controller initialization itself.

Sevice

app.service('RdaService', ['$http', function($http) { 
  var self = this;
  self.getListOfFilesonCTP = function(path) {     
      return $http ({
      method: "GET",
        url: "../api/CTP/getFilesonCTP/"+ path,
        headers: { 'Content-Type': 'application/json' }
    });
  };
}]);

Then do use that promise while retrieving data inside controller.

app.controller('RdaController', ['$scope', 'RdaService', function($scope, RdaService) {
    $scope.listOfFilesOnCTP = "";

    $scope.GetListOfFilesonCTP = function(path) {
        $scope.listOfFilesOnCTP = RdaService.getListOfFilesonCTP(encodeURIComponent(path)).then(function() {
            console.log($scope.listOfFilesOnCTP);
        });
    };
}]);

Hi @Pankaj, Thanks for a detailed response. I used ng-init for calling controller function, since I didn't know any other way to call that function. Can you tell me how to call controller function in this scenario from HTML page ? — Sharat Chandra, Apr 11 '16 at 20:06
@SharatChandra may I know why you wanted to call function from HTML? — Pankaj Parkar, Apr 11 '16 at 20:33
The HTML sends the path parameter to the controller via the function call.. Hence I need to call function from HTML.. — Sharat Chandra, Apr 11 '16 at 20:53

Scope variable not getting data object after http service returns

1 Answers1