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;

});

can you add the getsessionId function code

Nijeesh
– Nijeesh

2016-02-11 14:27:00 +00:00
Commented Feb 11, 2016 at 14:27 — Nijeesh
– Nijeesh, Commented Feb 11, 2016 at 14:27

Duncan · Accepted Answer · 2016-02-11 14:51:03Z

5

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>

edited Feb 11, 2016 at 14:51

answered Feb 11, 2016 at 14:31

Duncan

96.4k15 gold badges129 silver badges160 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

JohnDizzle Over a year ago

Is it possible with your solution to chain several different $http-requests ? I have to deal with up to 10 different requests which all fetch different data for a kind of dashboard.

JohnDizzle Over a year ago

How can I access the vm.items in my HTML-Template ?

Duncan Over a year ago

@JohnDizzle I expanded my answer for you.

JohnDizzle Over a year ago

The "problem" is that my controller is defined in the ng-routing-config because my HTML is just an imported template not an actual page. I tried to use ng-bind="TestController.items" just before my div with an iterator ng-repeat="object in items" but without success.

Duncan Over a year ago

@JohnDizzle Use 'ControllerAs' in your routing config. See willi.am/blog/2013/12/03/…

JoSeTe4ever · Accepted Answer · 2016-02-11 14:26:19Z

4

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;
    });
});

answered Feb 11, 2016 at 14:26

JoSeTe4ever

4726 silver badges18 bronze badges

2 Comments

Duncan Over a year ago

While this may work it is good to avoid nested the callback functions. With promises you can chain them instead.

JoSeTe4ever Over a year ago

Yes, I do agree. Actually it might lead to the "pyramid of doom" of chain promises. My vote goes to the @Duncan answer.

alexey · Accepted Answer · 2016-02-11 14:32:03Z

0

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();
});

answered Feb 11, 2016 at 14:32

alexey

8011 gold badge8 silver badges20 bronze badges

Collectives™ on Stack Overflow

Execute function after another AngularJS

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related