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
– Patrick Q, Commented Apr 20, 2018 at 14:44
foo() is called after accessScopeFunction() both within Init. Just updated my question. — Jeba
– Jeba, Commented Apr 20, 2018 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
– Patrick Q, Commented Apr 20, 2018 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
– Jeba, Commented Apr 20, 2018 at 14:58

Red · Accepted Answer · 2018-04-20 15:01:06Z

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 () { ... })

Luis Gonzalez · Accepted Answer · 2018-04-20 15:47:06Z

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

Collectives™ on Stack Overflow

Accessing Scope outside http.post request

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related