CODEWITHSUNDEEP
javascriptjqueryjsonfacebook-graph-apijsonp
user1231561
user1231561

Reputation: 3359

Facebook looping through returned JSON Open Graph request

Im currently requesting the Open Graph url through JSON like so:

https://graph.facebook.com/me/friends?fields=email,likes,name,birthday,location,website&access_token=$token

My JSON request is succesful, however my issue is to actually loop through the returned data, so that I can list it on my page.

I've tried with the following:

$('#goButton').click(function () {

        //Call the JSON feed from the Open Social Graph.
        $.getJSON("https://graph.facebook.com/me/friends?fields=email,likes,name,birthday,location,website&access_token=" + savedFbToken + "&callback=?",
              //Once it is returned, do something with the JSON:
              function (data) {

                console.log(data);
                  //Clear out the placeholder
                  $('#Placeholder').html("");
                  //Add some new data
                  $('#Placeholder').append("<h1>Name:</h1>" + data.name + "");
                  $('#Placeholder').append("<span>Birthday: "+ data.birthday +"</span><br/>");
                  $('#Placeholder').append("<span>Location: "+ data.location +"</span><br/>");
                  $('#Placeholder').append("<span>Id: "+ data.id +"</span><br/><br/>");
              });
    });

The format returned looks like this:

{
   "data": [
      {
         "name": "Name 1",
         "birthday": "10/08/1983",
         "location": {
            "id": "110343502319180",
            "name": "Copenhagen, Denmark"
         },
         "id": "263901486"
      },
      {
         "name": "Name 2",
         "birthday": "02/16/1982",
         "location": {
            "id": "110398488982884",
            "name": "Reykjav\u00edk, Iceland"
         },
         "id": "502533736"
      },
    etc...

Any suggestions on how to loop through this correctly?

Upvotes: 1

Views: 1243

Answers (1)

Travis J
Travis J

Reputation: 82267

data actually contains an object with an array of objects also named data, so you would need to loop through that

$('#Placeholder').html("");

for( var i = 0; i < data.data.length; i++ ){
 //Add some new data
 $('#Placeholder').append("<br />");
 $('#Placeholder').append("<h1>Name:</h1>" + data.data[i].name + "");
 $('#Placeholder').append("<span>Birthday: "+ data.data[i].birthday +"</span><br/>");
 $('#Placeholder').append("<span>Location: "+ data.data[i].location +"</span><br/>");
 $('#Placeholder').append("<span>Id: "+ data.data[i].id +"</span><br/><br/>");
}

Upvotes: 2

Related Questions