Accessing Scope outside http.post request

Question

I am posting with AngularJS http.post, putting the response.data into a scope within the successCallback function. console.log writes the scope data but I can't acces the scope data within another function.

Init calls the function for the request.

$scope.init = function(group_year_id,year)
{
    accessScopeFunction();
    foo();
};

This is the called function

function accessScopeFunction() {

    $http({
        method: 'POST',
        url: 'http://localhost/sjb/public/admin/groups/assing/angular/get/databasename'
    }).then(function successCallback(response) {
        $scope.getDatabaseName = response.data.event_db;
        console.log($scope.getDatabaseName);            
    }, function errorCallback(response) {
        return 'Fault';
    });

};

I would like to pass $scope.getDatabaseName to another function

function foo() {

    $http({
        method: 'POST',
        url: 'http://localhost/sjb/',
        data: {'databasename':$scope.getDatabaseName}
    }).then(function successCallback(response) {

    }, function errorCallback(response) {

    });
};

I read a lot about promise, AngularJS documentation, etc but I can't find a proper solution which works for me.

When and how is `foo()` being called? How are you guaranteeing that it is called _after_ the request in `accessScopeFunction()` has completed? — Patrick Q, Apr 20 '18 at 14:44
foo() is called after accessScopeFunction() both within Init. Just updated my question. — Jeba, Apr 20 '18 at 14:47
That's most likely your problem then. You're making an _asyncronous_ (the "a" in ajax) request. Your code fires the request and then keeps going, it doesn't wait for the response. So your `then` callback in the first request probably isn't happening until _after_ your `foo()` function gets called. — Patrick Q, Apr 20 '18 at 14:51
That explains a lot but what is the correct solution for solving this issue so I can use the $scope.getDatabaseName with a value (now it is undifined) in the foo() function, cause I can't find it — Jeba, Apr 20 '18 at 14:58
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) The answer in that post is a _very_ good (albeit somewhat long) read. I highly suggest you take the time to go through it. For a shorter answer see [this one](https://stackoverflow.com/questions/23283276/execute-function-after-ajax-call-is-complete) — Patrick Q, Apr 20 '18 at 15:01

score 1 · Accepted Answer · answered Apr 20 '18 at 15:01

Well, its pretty easy. $http returns a promise. So use that nice addition to create you own promises.

What currently happens at your code is the following:

accessScopeFunction();
foo();

They are called after each other, so while accessScopeFunction() is still processing and waiting to be resolved. foo() is also being called. So what you need to do is wait for accessScopeFunction() to finish.

You can do this by using the promise the $http calls are returning:

function accessScopeFunction()
{
    var promise = $http(
        {
            method: 'POST',
            url: 'http://localhost/sjb/public/admin/groups/assing/angular/get/databasename'
        }
    ).then(
        function successCallback(response)
        {
            $scope.getDatabaseName = response.data.event_db;
            console.log($scope.getDatabaseName);
        },
        function errorCallback(response)
        {
            return 'Fault';
        }
    );

    // Return the promise
    return promise;
};

Do the same for foo()

function foo()
{
    var promise = $http({
            method: 'POST',
            url: 'http://localhost/sjb/',
            data: {
                'databasename': $scope.getDatabaseName
            }
        }
    ).then(
        function successCallback(response)
        {

        }, function errorCallback(response)
        {

        }
    );

    return promise;
};

Then call accessScopeFunction() and use the then() callback to call foo()

$scope.init = function (group_year_id, year)
{
    accessScopeFunction().then(
        function ()
        {
            foo();
        }
    );
};

foo() can be used the same way.

foo().then(function () { ... })

score 0 · Answer 2 · answered Apr 20 '18 at 15:47

You have to chain your promises so you can access to the first result in the second function:

$scope.init = function(group_year_id,year)
{
  accessScopeFunction().then(foo(databaseName))
};

function accessScopeFunction() {
  return  $http({
    method: 'POST',
    url: 'http://localhost/sjb/public/admin/groups/assing/angular/get/databasename'
  }).then(function successCallback(response) {
    $scope.getDatabaseName = response.data.event_db;
    return $scope.getDatabaseName;
  }, function errorCallback(response) {
    return 'Fault';
  });
};

function foo() {

  $http({
    method: 'POST',
    url: 'http://localhost/sjb/',
    data: {'databasename':$scope.getDatabaseName}
  }).then(function successCallback(response) {

  }, function errorCallback(response) {

  });
};

Accessing Scope outside http.post request

2 Answers2