Angular JS $http promises

Question

i just want to ask about $http and promise usage, i seem to have a problem understanding on how to use it properly, i have ready some threads and guides on how to implement, i may have misunderstood it but here is what i did. I keep it as simple as possible in order for me to grasp it.

this.getAll = function(){
    var details = [];

    var deffered = $q.defer();

    var promise = $http.get('../test_data/patient_list.json');

    promise.then(function(response){
        $log.debug(response.data);
        angular.copy(response.data, details);
        details = response.data
    });

    return details;
};

during promise.then() data do exists, but when i try to copy it to another array after promise.then call details is empty. How come? Im a bit confused now, can anyone point or teach me how to properly handle data on $http

score 1 · Accepted Answer · answered Jul 31 '16 at 08:56

1

this.getAll = function(){
var details = [];

var deffered = $q.defer();

var promise = $http.get('../test_data/patient_list.json');

return promise.then(function(response){
    $log.debug(response.data);
    angular.copy(response.data, details);
    details = response.data
    return details; 
});

};

you have to return the promise then return details inside the .then() block.

you can also do the following:

this.getAll = function(){
 return $http.get('../test_data/patient_list.json')
  .then(function (response) {
     return response.data
  });
}

answered Jul 31 '16 at 08:56

Jideobi Benedine Ofomah

496
7
17

ohh but where does "deffered" come in this picture? – lemoncodes Jul 31 '16 at 08:57
@lemoncodes deferred is another way to handle promiese especially when you whan to wrap a callback or non-promise function call into a promise. By default, $http.get() returns a promise, so we don;t need $q.defer() – Jideobi Benedine Ofomah Jul 31 '16 at 09:01
yes i tried the code above, but when i return the "details" it returned the promise, i expected the actual data to be returned?, i think i misunderstood the returning part of the code.. – lemoncodes Jul 31 '16 at 09:05
@lemoncodes http request is an async call, so if you want the data to be available in hour controller for instance, call `getAll()` in your state definition resolve block (if you are using ui-roter or angular default router). The thing is response.data is only guaranteed to be defined and available inside the `.then()` block – Jideobi Benedine Ofomah Jul 31 '16 at 09:08
hmm it is just under a service i created, i wanted to have it resolve and return only an array, basically the service will do all the ajax call and just return the data i need. so i need to parse the promise before i return it to the controller where the service function "getAll" is being invoked. – lemoncodes Jul 31 '16 at 09:16
That is not the ideal way, call service.getAll() in the resolve block of the router that is linked to the controller. This way it is injected automatically to the controller. example: https://toddmotto.com/resolve-promises-in-angular-routes/ – Jideobi Benedine Ofomah Jul 31 '16 at 09:26
ohhh i see, gotcha there.. thanks – lemoncodes Jul 31 '16 at 09:28

Angular JS $http promises

1 Answers1