How to access the properties of returned json object? (AngularJS)

Question

I'm trying to do an api call to facebook (using angularJs. Here's my code (taken from the service):

fbTest: function (name) {
    resource = $resource('http://graph.facebook.com/:id?fields=id,name,picture', { id: '@id' });
    return resource.get({ id: name });
}

It returns the data just fine: (inspected with Fiddler)

HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Cache-Control: private, no-cache, no-store, must-revalidate
Content-Type: application/json; charset=UTF-8
ETag: "c49e5dcad5a864ff2e16bb3af547231f725c05e7"
Expires: Sat, 01 Jan 2000 00:00:00 GMT
Pragma: no-cache
X-FB-Rev: 1002313
X-FB-Debug: tMeW4nnfiRBj6VK+QRtbe0YdaGfQfkXcaWL4VzXTXxw=
Date: Mon, 11 Nov 2013 16:53:29 GMT
Connection: keep-alive
Content-Length: 241

{
   "id": "Data",
   "name": "Data",
   "picture": {
      "data": {
         "url": "Data",
         "is_silhouette": false
      }
   }
}

However how can I access the properties? I tried writing .name but that doesn't return anything.

Answer 1

The documentation is a little unclear to me, but it seems like some of the exposed methods such as .get execute asynchronously. What this means is that the return value from .get may not actually be returning the data from HTTP.

Instead, you need to do something like:

resource.get({ id: name }, function (data) {
    // do something with data.name, etc.
});

Answer 2

It happens because the result of the get isn't ready when you return the function. You are returning a promise .

Try binding the $resource.get to some attribute in your $scope and, when ready, it will be displayed correctly.