Value Returned from Angular JS $resource POST Not Matching Server Output

Question

I have a resource factory with a POST method called update:

PnrApp.factory('Feed', function ($resource, $cacheFactory, $q, $rootScope) {
var Feed = $resource('api/feeds/:post', { post: 'post' }, {
            get: { method:'GET' },  
            update: { method: 'POST' }

        });
return Feed;

});

When I call the method it POSTs the data to the server as expected:

    $rootScope.toggleStar = function (post, feedname) {
    var updated = Feed.update(post);
    this.child.StarId = updated.StarId;
}

And the server returns the correct values (notice the StarId in this json):

{"Name":"13 Ways to Act Like A Business Owner","ItemDate":"June 6, 2013","Url":"/post/13-Ways-to-Act-Like-A-Business-Owner-Stop-Acting-Like-an-Advisor-All-the-Time-(6-min-03-sec).aspx","StarImg":"bulletstar-on.png","StarId":1324,"StarDate":"0001-01-01T00:00:00","FeedCount":0,"FeedId":19,"SourceIcon":null,"IsBroken":false,"ItemId":"01"}

However, if you look at var updated's return value for StarId, notice how it's "0":

enter image description here

Can someone explain why this is, and how I can get at the return values in this situation?

Reto Aebersold · Accepted Answer · 2013-06-11 20:05:01Z

3

Your var updated = Feed.update(post); makes an async call to the server and returns immedaitly and the updated object gets updated as soon as the server returns the data. So I guess you try to access the updated.StarId too early. From the angular doc:

It is important to realize that invoking a $resource object method immediately returns an empty reference (object or array depending on isArray). Once the data is returned from the server the existing reference is populated with the actual data. This is a useful trick since usually the resource is assigned to a model which is then rendered by the view. Having an empty object results in no rendering, once the data arrives from the server then the object is populated with the data and the view automatically re-renders itself showing the new data. This means ththeat in most case one never has to write a callback function for the action methods.

Try something like this:

$rootScope.toggleStar = function (post, feedname) {
  var updated = Feed.update(post, function(f) {
    this.child.StarId = f.StarId;
  });      
}

edited Jun 11, 2013 at 20:05

answered Jun 11, 2013 at 19:40

Reto Aebersold

16.7k5 gold badges58 silver badges76 bronze badges

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

3 Comments

codethrift Over a year ago

That makes sense, and I've read that in the docs, but I can't seem to find the syntax to get the value when it finally is returned. Thoughts on that?

codethrift Over a year ago

Getting closer. this.child.StarId = f.StarId -- f.StarId now holds the returned value but this.child.StarId throws error: Cannot set property 'StarId' of undefined

Reto Aebersold Over a year ago

Yeah, the this is now in the callback context. One solution is to define var that = this; outside the callback and then assign to that inside the callback

Collectives™ on Stack Overflow

Value Returned from Angular JS $resource POST Not Matching Server Output

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related