Cannot access sub object of returned JSON object

Question

I might just be blind or something, but I really cannot figure out why I cannot access a sub object of a returned $Resource object that retrieved a bunch of JSON objects.

Resource
> $resolved: true
> $then: function (b, g) {var j=e(),h=
> data: Object
  > 519bc5f6b2427a732be1c360: Object

The raw JSON looks like this:

{
    "data": {
        "519bc5f6b2427a732be1c360": {
            "id": "519bc5f6b2427a732be1c360",
            "planning": {
                "id": "519bc5f6b2427a732be1c355"
            }
        }
    }
}

Can anyone explain me why this doesn't work:

var training = Training.query()

console.log(training); // returns the entire $Resource
console.log(training.data); // returns: undefined

A scientific guess: felix-kling.de/blog/2011/08/18/… PS: If I were you I would put a break (just a regular one or using debugger;) and check with debugger what is the actual value (that's right, you can trust a debugger, and you cannot trust console.log()) — zerkms
– zerkms, Commented May 25, 2013 at 12:23
@user1737909 Good point, but that's already solved in my services layer, didn't add that; I have manually set .query() to return isArray: false; — Bjorn 'Bjeaurn' S
– Bjorn 'Bjeaurn' S, Commented May 25, 2013 at 12:26
omg, instead of checking and getting the data for sure you guys prefer continue guessing.......... It's so weird way to program, really — zerkms
– zerkms, Commented May 25, 2013 at 12:30

joakimbl · Accepted Answer · 2013-05-25 12:50:31Z

Here is the explanation - from the Angular docs:

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 that in most case one never has to write a callback function for the action methods.

So this works:

var training = Training.query(function(value){
  // this is the callback function
  console.log(training === value); // true - it's the same object
  console.log(training.data); // and now it has data
});

Jst · Accepted Answer · 2013-05-25 12:42:37Z

1

Try getting the data like this:

var training = Training.query(function($val) {
    console.log($val);
    console.log($val.data);
});

answered May 25, 2013 at 12:42

Jst

262 bronze badges

1 Comment

Bjorn 'Bjeaurn' S Over a year ago

This works! I've got another problem now, but I might be able to figure this out. Thank you for your contribution! The closure function seemed to work for some reason, but I still deem this weird and unexpected behavior.

Collectives™ on Stack Overflow

Cannot access sub object of returned JSON object

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related