CODEWITHSUNDEEP
javascriptangularjsasynchronousdeferredangular-promise
Trialcoder
Trialcoder

Reputation: 6004

Store data from asynchronous call to a variable in AngularJS

Following is the code in which I am trying to use promise to save data from an asynchronous call to a variable but its not working. I am new to promise as I serached and found promise helps in these cases but I am unable to apply, let me know what I am doing wrong here -

angular.module("app").controller("myCtrl", function($scope, $http, $q) {
    var deferred = $q.defer();

    var data = $http.get("/api/events").success(function(response){
    deferred.resolve(response);
    return deferred.promise;
    // ALSO tried return response;
    })
    console.log("DATA--");
    console.log(data);
});

EDIT -

I am trying to hit two APIS -

1) Create array of ids from 1st API hit.

2) Loop to the array for 2nd API hit on id basis.

3) Concatenate some data from array 1 and array2.

More specific case, which I am trying to do but found to use promise -

http://pastebin.com/ZEuRtKYW

Upvotes: 0

Views: 4548

Answers (3)

Jai
Jai

Reputation: 74738

I think this can be done somthing like as:

angular.module("app").controller("myCtrl", function($scope, $http, $q) {

   var ids = [],
       q1 = $q.defer(), 
       q2 = $q.defer();
       d1 = $http.get("/api/events").success(function(data){
               q1.resolve(data);
               angular.forEach(data, function(id) {
                  ids.push(id); 
               });
            }).error(function(err){
                q1.reject("Ooops!!")
            });

   var promises = [];

   angular.forEach(ids, function(id) {
      var promise = $http.get("/api/events", {id:id})
                    .success(function(data){
                        q2.resolve(data);
                    }).error(function(err){
                        q2.reject("Ooops!!")
                    });
      promises.push(promise);
   });

   $q.all(promises)
     .then(function(values) {        
       console.log(values);
   });
});

Upvotes: 0

Dieterg
Dieterg

Reputation: 16368

I would do it as follows: 

$http.get('data.json').success(function (result) {
    $scope.result = result;
}).then(function (data) {
    var result = data.data.key;

    var promises = result.map(function (val) {
        var deffered = $q.defer();

        $http({
            method: 'GET',
            url: 'data-' + val.id + '.json'
        })
        .success(function (x) {
            deffered.resolve(x);
        })
        .error(function () {
            deffered.reject();
        });

        return deffered.promise;
    });

    $q.all(promises).then(function (result) {
        $scope.resolvedData = result;
    });

});

Map all the promises into a promises array based on the result of the first call. Inside this map function create a new promise and resolve it in the success function. Make sure you return the actual promise!

Afterwards you can get all the resolved data with $q.all(promises). This way your calls to the database are not limited to 2. You can do as much calls as you want based on the data retrieved in the first call.

Plunker

Edit: Not sure if you're able to modify the service, but it would be better if you can achieve this with only one call. For instance:

get '/api/events' --> returns just the events
get '/api/events?includeDetail=true' --> returns the events + the details of an event

Upvotes: 1

Vikram Babu Nagineni
Vikram Babu Nagineni

Reputation: 3549

When you get response in asynchronous call, store it in scope variable. Then you can access that scope variable anywhere inside controller. 

 angular.module("app").controller("myCtrl", function($scope, $http) {
         $http.get("/api/events").success(function(response){
         $scope.response = response;     
        })

    });

Upvotes: 1

Related Questions