Accessing data from response of FB.api()

I am having difficulty accessing the returned JSON response data from the new Facebook JS SDK new Graph API calls.

For instance, in some of their docs where they are using the old way of using the S开发者_运维知识库DK , they get a pointer to the data by response[0]

but here, it's showing that you need to use response.data[0] instead: http://developers.facebook.com/tools/console/ (click on fb.api — photo-albums)

So which is it? I know that with my code below, if I try using response[0] type of syntax to get at the returned JSON I get undefined.

If I use response[0].length I also get undefined

But if I try response.data[0].length I get 2 which I guess is the returned JSON or my 2 albums..I just don't know how to play with this returned object in terms of syntax and manipulating it, its properties, etc.

I want to in the end parse out the returned JSON using the jQuery parseJSON method but have no clue how to even pass the right syntax here for the response and just use that response object.

FB.api(uri, function(response)
{
    alert("response: " + response);

    // check for a valid response
    if (response == "undefined" || response == null || !response || response.error)
    {
        alert("error occured");
        return;
    }

    alert("response length: " + response.data.length);
}

this alert gave me 2 which makes sense. I have 2 albums.

then I tried something like response.data[0] and tried a jQuery parseJSON(response.data) or parseJSON(response.data[0]) on that and it does not work. So can someone explain the response object here as in regards to Facebook I guess? I see no docs about how to use that returned object at all and how it's constructed.

UPDATED:

Ok, so here's the entire parsing method attempt that I've stubbed out so far. I don't know if the jQuery parsing is 100% good code yet, I sort of stubbed that out but I can't even test that until I figure out how to use this response object coming back. I know it is returning JSON because I parsed another facebook response object in another method in the JS SDK so pretty sure that response[0] or response.data[0] will give you the JSON string.

function GetAllFacebookAlbums(userID, accessToken)
{
    alert("inside GetAllFacebookAlbums(userID, acessToken)");

    var dFacebookAlbums = {}; // dictionary
    var uri = "/" + userID + "/albums?access_token=" + accessToken;
    //var uri = "/me/albums";

    alert("get albums uri: " + uri);

    FB.api(uri, function(response) 
    {
        alert("response: " + response);

        // check for a valid response
        if (response == "undefined" || response == null || !response || response.error) 
        {
            alert("error occured");
            return;
        }

        alert("response length: " + response.data.length);

        for (var i=0, l=response.data.length; i<l; i++)
        {
            alert("response[key]: " + response.data[i].Name);
        }

        // parse JSON from response
        var dJSONObjects = jQuery.parseJSON(response.data);

        alert("dJSONObjects: " + dJSONObjects);

        if (dJSONObjects.length == 0)
            return;

        // iterate through the dictionary of returned JSON objects 
        // and transform each to a custom facebookAlbum object
        // then add each new FacebookAlbum to the final dictionary 
        // that will return a set of facebookAlbums
        $.each(json.attributes, function () {
            // add a new album to the dictionary
            aFacebookAlbums[i] = FacebookAlbum(
                                                jsonObject["id"],
                                                jsonObject["name"],
                                                jsonObject["location"],
                                                jsonObject["count"],
                                                jsonObject["link"]
                                              );
        });
    });

    return dFacebookAlbums;
}

---

It depends on the API being used. For the new Graph API single objects come back as top level object: http://graph.facebook.com/naitik -- where as collections come back with a top level data property which is an Array: http://graph.facebook.com/zuck/feed. There's also introspection to make things somewhat easier: http://developers.facebook.com/docs/api#introspection. FQL is the other popular API call, and this is where the top level response is array (think rows in SQL) which is why some examples use response[0]. Easiest thing is to just look at the response in your browser or via curl and see what it looks like.

---

just to clarify for all you folks who are new to FB.api (as I am) graph queries return different shaped data ... here are two examples: FB.api('me/' function(returnData) { } ) would put the following data into returnData

{
  "id": "592529630", 
  "name": "Hugh Abbott", 
  "first_name": "Hugh", 
  "last_name": "Abbott", 
  }

then if I said returnData.first_name I would get "Hugh"

If however my query was about my friends, I might run the following query FB.api('me/friends/' function(returnData) { } ) And the shape of my data is now different:

 "data": [
    {
      "name": "Tom Bell", 
      "id": "36801805"
    }, 
    {
      "name": "Michael Royce", 
      "id": "199712888"
    }, 
]

... so returnData is now a array ... in order to retrieve values, I would do something like the following.

returnData.data[0].name this would return "Tom Bell"

I hope this helps, as I spent a few hours wondering where I had gone wrong ... it turns out, it is all in the shape of the data !!!! good luck my friends.

Hugh

---

In general, the JS SDK doesn't return JSON object but it returns an object which is structured similar to the JSON Object.

Say for example : One is polling for user events data and according to the GRAPH API reference (http://developers.facebook.com/docs/reference/api/event), the returned data will have attributes as given http://developers.facebook.com/docs/reference/api/event.

The JSON object for the events data would be like this if you are using PHP SDK

Array ( [data] => Array ( [0] => Array ( [name] => sample event [start_time] => 2010-08-09T22:00:00+0000 [end_time] => 2010-08-10T01:00:00+0000 [location] => at office\ [id] => xxxxxxxx [rsvp_status] => attending )) [paging] => Array ( [previous] => hyperlink [next] => hyperlink ) )

But if you are using JS SDK, then the returned response will be like this

response.data[0...n].attributes of the particular table which you are accessing. So, in the case of event table it will be like this :

response.data[0...n].name or response.data[0...n].id, response.data[0...n].end_time, etc

---

Did this ever get figured out. No one accepted anything.

alert("response[key]: " + response.data[i].Name);

The above code has Name and not name. Also, as Matti pointed out above, this works:

response.data[0].name

Just my two cents. @CoffeeAddict, accept answers to show some appreciation... Seems like someone with you rep would appreciate that. :o)

---

I haven't looked at the API, but I doubt FB would give you JSON encoded strings in an array. Have you tried just accessing response.data[0].someproperty?

---

If there is no error, then response.data should be the stuff you want (this will be an array in most cases) if you are using the new graph api. You could always just alert the JSON string if you are unsure what you are getting back.

---

I'm sure this must not be an issue anymore considering the Graph API explorer clearly displays the data in the form that it is returned. You are right about the difference in structure of the responses, but personally it has been useful to see what data is returned using the explorer and use the syntax accordingly.