How to access an array in AngularJS controller populated by $resource get()?

Question

I can not access an array in the AngularJS controller but it works in the view.

In the controller: .results returns undefined

function TwitterCtrl($scope, $resource){

  $scope.twitter = $resource('http://search.twitter.com/:action',
      {action:'search.json', q:'angularjs', callback:'JSON_CALLBACK'},
      {get:{method:'JSONP', params: {rpp: 4}}});

    $scope.twitterResult = $scope.twitter.get({q:"example"});

    //returns the resource object
    console.log($scope.twitterResult)

    //returns undefined
    console.log($scope.twitterResult.results);
}

In the view: .results returns an array of tweets

//This returns an array of tweets
{{$scope.twitterResult.results}}

See also stackoverflow.com/questions/14373661/angularjs-data-assignment — Mark Rajcok
– Mark Rajcok, Commented Mar 18, 2013 at 13:59
Thanks mark. That post describes what I've been trying to achieve. I put all of my code in the success callback in order to use the results array. I wish I could assign the array to a variable and access it outside of that function. — Dru
– Dru, Commented Mar 18, 2013 at 16:02
You can do that -- e.g., $scope.twitterResult = $scope.twitter.get(...)` -- as long as you also add a $watch('twitterResult', function(newValue) { ... }) to detect when it gets asynchronously updated. — Mark Rajcok
– Mark Rajcok, Commented Mar 18, 2013 at 16:10

Stewie · Accepted Answer · 2013-03-17 20:41:48Z

5

$resource calls are asynchronous, but $resource service returns a blank object for resource.get calls immediately on invocation (or empty array on resource.query calls). Then, only after the promise gets resolved (server returns response), the $resource service assigns the actual results to the $scope.twitterResult variable.

That's why $scope.twitterResult is blank on immediate access (console.log), but (seemingly) 'works' in your view.

Your view expression {{$scope.twitterResult.results}} is also undefined at first, but Angular's $parse service (responsible for parsing view expressions) does not output undefined because it's designed not to. As soon as server response is received, the view expression is updated, and twitterResult.results are displayed.

answered Mar 17, 2013 at 20:41

Stewie

60.4k20 gold badges148 silver badges113 bronze badges

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

2 Comments

Dru Over a year ago

$scope.twitterResult is not blank when using console.log in the controller. It returns the resource object. I can see the results array that I want to access when it's logged. However, I get undefined when I use $scope.twitterResult.results in the controller.

Mark Rajcok Over a year ago

@Dru, by the time you manually click the twitterResult array in the console, the results have been populated (asynchronously). This is the way Chrome works. If you instead log console.log(JSON.stringify($scope.twitterResult)) you will see that results are not populated at the time this statement actually executes.

Collectives™ on Stack Overflow

How to access an array in AngularJS controller populated by $resource get()?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related