Extracting data from angularJS $resource

Question

I'm having an issue using Angular's $resource service. Since my API sends back a complete response (headers etc), along with an error field in the data Object, I need to get a specific object from the response. This is fairly simple to do with the $http service but I don't understand where to grab these parameters with the $resource service. Below is the working $http request.

$http({
  method  : 'GET',
  url     : 'http://api.discussorama.com/v1/topics',
  headers : {'X-Api-Secret': 'xxx', 'Authorization': 'xxx', 'Content-Type': 'application/x-www-form-urlencoded'}  
})
.then(function(response) {
  console.log(response);
  $scope.topics = response.data.topics;
});

And this is my unsuccessful attemt at the same request with $resource:

var Topic = $resource('http://api.discussorama.com/v1/topics/:id', {id: '@id'}, {
  query: {
    isArray: false,
    method: 'GET',
    headers: {'X-Api-Secret': 'xxx', 'Authorization': 'xxx', 'Content-Type': 'application/x-www-form-urlencoded'}
  }
 });

var response = Topic.query();
$scope.topics = response.topics;
console.log(response);

EDIT: After updating the above code this is what I get in the console.

f {$promise: Object, $resolved: false, $get: function, $save: function, $query:    function…}
  $promise: Object
  $resolved: true
  error: false
  topics: Array[10]
  __proto__: f

However if I change the console log to:

console.log(response.topics);

The console simply returns:

undefined

Where am I going wrong with this? If it helps the link to the page in question is http://hwaelapps.com/discuss/web

Pavel Rogala · Accepted Answer · 2014-04-25 21:43:10Z

5

You are not handling the promise that $resource hands back. It needs to be handled like your $http call above.

var Topic = $resource('http://api.discussorama.com/v1/topics/id', { id: '@id'}, {
  query: {
    isArray: false,
    method: 'GET',
    headers: {'X-Api-Secret': 'xxx', 'Authorization': 'xxx', 'Content-Type': 'application/x-www-form-urlencoded'}
  }
});

var response = Topic.query();
response.$promise.then(function(data){
    $scope.topics = data.topics; //Changed data.data.topics to data.topics
});

edited Apr 25, 2014 at 21:43

Pavel Rogala

1633 silver badges12 bronze badges

answered Apr 25, 2014 at 21:28

MBielski

6,6103 gold badges36 silver badges46 bronze badges

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

4 Comments

Pavel Rogala Over a year ago

Oddly with the above code I get: TypeError: Cannot read property 'then' of undefined. I also updated the question with some more data from the console. Maybe there's something more to explain my situation.

Pavel Rogala Over a year ago

It seems that the topics data is returned outside of the promise, if that's a possibility.

MBielski Over a year ago

Sorry, forgot the $ in front of the promise. Answer updated. (I have this pattern in daily use, so you'd think I'd remember it.)

Pavel Rogala Over a year ago

Thank you so much. That solved my problem. I adjusted your code a bit above from data.data.topics to data.topics. I probably explained it wrong in my original question. Thanks again.

Collectives™ on Stack Overflow

Extracting data from angularJS $resource

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related