Angulajs wait till REST API returns data

Question

I am using Trello API, which does not return promise. It has callback functions. I want to write a wrapper to it, which will wait till callback is executed and return the data. I have written below code :

 function getLoggedInMember() {
    var deferred = $q.defer();
    Trello.members.get("me", deferred.resolve);
    deferred.promise.then(function (user) {
        return user;
    });
}

This function is in my Member Service. Below is my routeConfig :

angular.module('trelloDashboard').config(['$routeProvider', function ($routeProvider) {
$routeProvider
 .when('/', {
     templateUrl: 'Views/Login.html',
     controller: 'LoginController'
 })
 .when('/Dashboard', {
     templateUrl: 'Views/Dashboard.html',
     controller: 'DashboardController',
     resolve: {
         user: function (MemberService) {
             return MemberService.getLoggedInMember();                 
         }
     }
 });}]);

This is obviously not working. Is there a way to achieve what I am trying to do here? Thank you.

Yes, what is wrong is that you're not returning anything from the function. You need to `return deferred;` in your function. — Benjamin Gruenbaum, Oct 30 '14 at 13:24
possible duplicate of [How do I convert an existing callback API to promises?](http://stackoverflow.com/questions/22519784/how-do-i-convert-an-existing-callback-api-to-promises) — Benjamin Gruenbaum, Oct 30 '14 at 13:24
Also, Angular 1.3 deferreds are not bound so if you're on 1.3 and not 1.2 you have to do `get("me", function(val){ deferred.resolve(val); })` for context instead of just `deferred.resolve` — Benjamin Gruenbaum, Oct 30 '14 at 13:28
Awesome! that worked! This is the final function: function getLoggedInMember() { var deferred = $q.defer(); Trello.members.get("me", function(user){ deferred.resolve(user); }); return deferred.promise; }. No change in the route config. — shwetaOnStack, Oct 30 '14 at 13:32
I'm glad I could help, it is always best to first refer to the canonical question which mentions the problem in your code and how to fix it. Moreover you might want to consider the promise constructor (1.3 and up) for better error handling. — Benjamin Gruenbaum, Oct 30 '14 at 13:34

score 0 · Answer 1 · answered Oct 30 '14 at 13:15

0

Try adding

    deferred.promise.then(function (user) {
            return user;
        },function(error){
    console.log("Error");
    console.log(error);
    //ur return statement
    });

answered Oct 30 '14 at 13:15

sabari

2,595
5
28
44

not working. I did try that earlier.It is not giving any error. – shwetaOnStack Oct 30 '14 at 13:19
function getLoggedInMember() { var deferred = $q.defer(); Trello.members.get("me", deferred.resolve); return deferred.promise; } – sabari Oct 30 '14 at 13:25

score 0 · Answer 2 · answered Oct 30 '14 at 13:17

Not tested, but try:

 .when('/Dashboard', {
     templateUrl: 'Views/Dashboard.html',
     controller: 'DashboardController',
     resolve: {
         user: MemberService.getLoggedInMember
     }

But your getLoggedInMember function should return a promise.

According to angular docs:

resolve - {Object.=} - An optional map of dependencies which should be injected into the controller. If any of these dependencies are promises, the router will wait for them all to be resolved or one to be rejected before the controller is instantiated. If all the promises are resolved successfully, the values of the resolved promises are injected and $routeChangeSuccess event is fired. If any of the promises are rejected the $routeChangeError event is fired.

score 0 · Accepted Answer · answered Oct 30 '14 at 13:35

0

Here is what worked!

  function getLoggedInMember() {
    var deferred = $q.defer();
    Trello.members.get("me", function(user){ deferred.resolve(user); });
    return deferred.promise;
}

No change was needed in route config. Thank you, @Benjamin :)

answered Oct 30 '14 at 13:35

shwetaOnStack

594
4
13

Consider this instead: `function getFoo(){ return $q(function(resolve){ Trello.members.get("me", resolve); }) }`. It's shorter, more throw safe and does the same thing. – Benjamin Gruenbaum Oct 30 '14 at 13:38
cool! Could you explain what do yo u mean by more throw safe? – shwetaOnStack Oct 30 '14 at 13:41
Yes, if for example `Trello` is undefined or `Trello.members.get` throws synchronously - instead of the exception being swallowed, angular will track it and call the exception handler and then let you handle these errors in `.catch` which you can chain to the returned value. – Benjamin Gruenbaum Oct 30 '14 at 14:06

Angulajs wait till REST API returns data

3 Answers3