AngularJS accessing $scope outside of method

Question

Here is my method inside a controller, i want to access the $scope.oldcats outside the below given method. Using console.info($scope.oldcats); inside the method, outputs the data, but using console.info($scope.oldcats); outside function display undefined.

$scope.loadPost = function() { //Issues a GET request to /api/post/:id to get a Post to update
    $scope.posts = Post.get({ id:$stateParams.id}, function(response){
       $scope.posts = response.data;
       $scope.posts.selcats = response.data.categories;
       var cats = $scope.posts.categories;
       $.each(cats, function(arrayID,group) {
           $scope.allCats.push(group.id);
       });
       $scope.oldcats = $scope.allCats; // <- i want to access it
       console.info($scope.oldcats); // <- output displays data
   });
  };

  $scope.loadPost(); // Load a Post which can be edited on UI

  console.info($scope.oldcats); // <- output display undefined

Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Grundy, Feb 04 '16 at 06:19

score 0 · Answer 1 · answered Feb 04 '16 at 06:36

0

The console.info outside the function is called before the API call gets finished. Therefore it logs undefined. But the console inside the function is being called after the API call gets finished. This is called asynchronous behaviour. Have a look at Promises

This thinkster tutorial will be helpful to understand asynchronous behaviour better: Thinkster-understand promises

answered Feb 04 '16 at 06:36

ashfaq.p

5,379
21
35

using console.log also shows undefined.. and $scope variable have no data – Sagun Gautam Feb 04 '16 at 06:39
Anything you use will show you undefined because the API call has not finished. – ashfaq.p Feb 04 '16 at 06:40
how can we access that $scope.oldcats variable outside of the method ? – Sagun Gautam Feb 04 '16 at 06:41
You can access it in the same way you are doing now, but you will have to wait for the api call to finishe. And for that you will need promises which will notify you once the call gets finished. – ashfaq.p Feb 04 '16 at 06:44

score 0 · Accepted Answer · answered Feb 04 '16 at 06:40

0

You made several mistakes and you should use promises:

$scope.loadPost = function(){ //Issues a GET request to /api/post/:id to get a Post to update        
    $scope.posts = function(){
       var deferred = $q.defer();
       Post.get({ id:$stateParams.id}, function(response){
           $scope.posts = response.data;
           $scope.posts.selcats = response.data.categories;
           var cats = $scope.posts.categories;
           $.each(cats, function(arrayID,group) {
               $scope.allCats.push(group.id);
           });
           $scope.oldcats = $scope.allCats; // <- i want to access it
           deferred.resolve($scope.oldcats);
           console.info($scope.oldcats); // <- output displays data
    });
    return deferred.promise;
  };
  return $scope.posts;
};

$scope.loadPost()().then(function(res){
    console.info(res);
});

answered Feb 04 '16 at 06:40

Slava Utesinov

13,410
2
19
26

i want to assign 'res' data to '$scope.selectedCategory' outside the function – Sagun Gautam Feb 04 '16 at 06:54
You can do that `$scope.selectedCategory = res;` instead of `console.info(res);`, because `$scope` is a global object inside controller. It is the only way. At this case you can't just write something like `$scope.selectedCategory = $scope.loadPost();`. Or I don't understand something, what do you mean about "outside the function", what is this function(loadPost, posts or something else)? – Slava Utesinov Feb 04 '16 at 07:00
my bad language sorry... i mean accessing $scope.selectedCategory outside '$scope.loadPost()().then(function(res){ $scope.selectedCategory = res; });' it shows undefined – Sagun Gautam Feb 04 '16 at 07:09
Where you checked that it is undefined, inside last construction? – Slava Utesinov Feb 04 '16 at 07:17
I created simple [examle](http://plnkr.co/edit/JuQ6QE4qI9CmirzPmilP?p=preview)(Post.get I simulated by means on $interval service) I think it will help you. – Slava Utesinov Feb 04 '16 at 07:24
'Resource {$promise: d, $resolved: false} $promise: d $resolved: true data: Array[2] 0: 1 1: 3 length: 2 __proto__: Array[0] message: "category listed" __proto__: Resource' i have the following output for my data.. i want only the data that is 1 and 3 in array ? how can we achieve it ?? sorry for bothering u .. as i am new to angular – Sagun Gautam Feb 04 '16 at 08:26
I don't understand. First, what is _Resource_, is it `response`? And _data_, as I assume, is `response.data`? _1 and 3 in array_ - i.e. you want to take items at 1 and 3 position, but you have only array of 2 items, if you want to take items with 1 and 3 values, I don't understand is there sence for that at all. – Slava Utesinov Feb 04 '16 at 09:00
I completely confused about what happening, maybe this [variant](https://jsfiddle.net/xj7z7omd/1/) will help you. – Slava Utesinov Feb 04 '16 at 10:53

AngularJS accessing $scope outside of method

2 Answers2