Execute function after another AngularJS

Question

I need to execute a function which fetches data after a kind of login function who provides the sessionId . This sessionId is necessary for the second function.

app.controller('TestController', 
 function ($scope, dbObjectsDAO, loginService){    

    var sessionID = loginService.getSessionID(); //Login function

    var self = this;

    this.items = [];

    this.constructor = function() {
        dbObjectsDAO.getAll(sessionID).then(function(arrObjItems){
            $scope.items = arrObjItems;
        });
    };

    this.constructor(); //get the data

    return this;

});

I tried several variations like:

loginService.getSessionID().then(function(sessionID){
  this.constructor();  //also with just constructor();
});

But I always receive errors (in the case above: Illegal constructor ).
So how can I manage to execute one function after another ? Maybe a callback structure would help here but I have no clue how to realize it.

---

EDIT
Here is the code for the login:

app.service('loginService', function($http, $q) {


    this.getSessionID = function()
    {
        return $http({
            method: "GET",
            url: "http://localhost:8080/someRequestDoneHere"
        }).then(function(response)
        {
            return response.data.sessionId; // for example rYBmh53xbVIo0yE1qdtAwg
        });
    };

    return this;

});

Answer 1

Does your getSessionID() function return a promise? If so you want code like this:

app.controller('TestController', 
 function ($scope, dbObjectsDAO, loginService){    

    var sessionID;
    var vm = this;
    vm.items = [];

    loginService.getSessionID()
    .then(function(sid) {
        sessionID = sid;
        return dbObjectsDAO.getAll(sessionID);
    })
    .then(function(arrObjItems){
        vm.items = arrObjItems;
    });
 });

So your login service returns a promise which resolves to the session id. You can save that in a variable for use elsewhere, and also use it to trigger fetching the items.

I also changed your self to vm as that naming is an Angular convention, and stored the items in vm.items rather than directly in the scope.

Edit: Your login code already returns a promise, not a session id. return inside a then is simply going to return a new promise that resolves to the value you are returning.

There are several ways to chain multiple $http requests. If they are independent of each other just fire off a bunch of requests and use $q.all to handle when they have all completed.

var promise1 = $http(something)
.then(function(response) { vm.data1 = response.data; return vm.data1; });
var promise2 = $http(something)
.then(function(response) { vm.data2 = response.data; return vm.data2; });

$q.all([promise1, promise2], function(values) {
    // here can safely use vm.data1 or values[0] as equivalent
    // and vm.data2 or values[1].
});

If one request depends on the result of another you could even do this:

var promise1 = $http(something)
.then(function(response) {
    vm.data1 = response.data;
    return { method:'GET', url: response.data.link}
 });
 var promise2 = promise1.then($http)
.then(function(response) { vm.data2 = response.data; return vm.data2; });

Your template needs to declare the controller using the 'controller as something' syntax:

<div ng-controller="TestController as test" ng-bind="test.items"></div>

Answer 2

Have you tried to nest the second function, like this ? without the constructor call ?

loginService.getSessionID().then(function(sessionID){
    dbObjectsDAO.getAll(sessionID).then(function(arrObjItems){
        $scope.items = arrObjItems;
    });
});

Answer 3

Mb you have wrong scope in

..then(function(sessionID){...}) ?

you can try some this like this:

var vm=this;
loginService.getSessionID().then(function(sessionID){
  vm.constructor();
});