javascript function not returns undefined value

Question

i'm having following angularjs function :

this.loadDocument = function() { 
                var documents = [];
                 alert("load documents"); 
                $http({
                     url: 'http://localhost:8085/api/jsonws/dlapp/get-file-entries/repository-id/10182/folder-id/0',
                     method: 'get',             
                     headers: {
                            "Authorization": this.makeAuth(this.username,this.password)
                     }
            }).success(
                    function(response) {
                        alert("sucess");                        
                        documents=response;
                    });
              return documents; 
         };

i called it from following code :

$scope.loadDocument = function() {
        $scope.documents=documentService.loadDocument();

    }

but return value from the function is undefined.because it returns value before success method of ajax call executing.

is there any solution?

Thanks in advance.

Answer 1

You need to use promises.

this.loadDocument = function() { 

        return $http({
                     url: 'http://localhost:8085/api/jsonws/dlapp/get-file-entries/repository-id/10182/folder-id/0',
                     method: 'get',             
                     headers: {
                            "Authorization": this.makeAuth(this.username,this.password)
                     }
            }).then(
                    function(response) {
                       return response;
                    });
         };

The loadDocument() function now returns a promise which you can use in your controller to update $scope.documents only when the Ajax call completes.

 $scope.loadDocument = function() {
           documentService.loadDocument().then(
                 function(result){
                 $scope.documents= result;
           }); 
 }

Answer 2

$http service of angular return a promise so you need to return promise like this:

this.loadDocument = function() {
    return $http({
        url: 'http://localhost:8085/api/jsonws/dlapp/get-file-entries/repository-id/10182/folder-id/0',
        method: 'get',
        headers: {
            "Authorization": this.makeAuth(this.username, this.password)
        }
    });

Then you call the promise and wait for success or fail:

    $scope.loadDocument = function() {
       documentService.loadDocument().then(function(response){
          //the promise success
          $scope.documents = response.data;
       }).catch(function(err) {
          //the promise failed
       })

 }