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.

See this article: [stackoverflow.com/questions/1826727/… [1]: stackoverflow.com/questions/1826727/… — NM Pennypacker
– NM Pennypacker, Commented Nov 11, 2013 at 16:59
@NickM I looked at it but I don't get what I'm supposed to do. — Jordan Axe
– Jordan Axe, Commented Nov 11, 2013 at 17:01

D.Evangelista · Accepted Answer · 2013-11-11 17:08:23Z

1

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.

answered Nov 11, 2013 at 17:08

D.Evangelista

6,5511 gold badge28 silver badges33 bronze badges

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

Comments

Explosion Pills · Accepted Answer · 2013-11-11 17:07:15Z

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.
});

answered Nov 11, 2013 at 17:07

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related