Graph API - FB - Getting crazy already. :s - Getting profile pictures

I can get the profile pictures from this:

data": [
      {
         "id": "11111111111_22222222222",
         "from": {
            "name": "Some Name",
            "category": "Non-profit organization",
            "id": "11222131212211"
         },

I'm doing like so:

$.each(json.data,function(i,fb){
  html += "<img id=\"image"+i+"\" src=\"http://graph.facebook.com/" + fb.from.id + "/picture\"/>";
}

No problems.

However, later on the graph I have:

"id": "11111111111_2222222222",
         "to": {
            "data": [
               {
                  "name": "Some Name",
                  "category": "Non-profit organization",
                  "id": "1122213开发者_JAVA技巧1212211"

And I need to grab this id but I've tried: alert(fb.to.data.id); got nothing. If I do: alert(fb.to) I got "undefined".

Has anyone had this sort of problems or similar. As you may notice I'm not at all versatle onto programing matters, however, I will do my best to solve this issue.

1) How can I display the profile image on the second case? 2) How can I say: use the fb.from.id only when the graph has that.

About 2), please note that if I comment the line:

//html += "<img id=\"image"+i+"\" src=\"http://graph.facebook.com/" + fb.from.id + "/picture\"/>";

no images will be show and all post information (except the profile picture) is displayed on the viewport.

If I deal only with the first part of this graph (the one with "from:") I get the picture for that post.

SO, the issue must be, indeed, on the second graph part. The one with the "to:" that I can't grab the ID.

I've tried, as well, to avoid rendering the image on the second case but, at least run the first one. No luck at all.

if (fb.from.id != undefined) {
 //do something;
}

The second part of the graph still returns an error.

With all this mess, that I can re-arrange, can I please ask your help. :S

**

Update:

**

The js code:

function fbFetch(){
        var url = "https://graph.facebook.com/125120007543580/feed&callback=?&limit=2";

    var i = 0;

        //Use jQuery getJSON method to fetch the data from the url and then create our unordered list with the relevant data.
    $.getJSON(url,function(json){
        var html = "<div id=\"faceWall\">";
            //loop through and within data array's retrieve the message variable.
            $.each(json.data,function(i,fb){

                    var idTotal = fb.id;

                    var ids = idTotal.split("_");

                    var href = "http://www.facebook.com/"+ids[0]+"/posts/"+ids[1];


                    var msg = fb.message;

                    //adicionado 
                    if (msg == undefined) {
                        msg = 'Cick here to see the post title';
                    } else if (msg.length > 150) {
                        msg = msg.substr(0,200)+"...";
                    } 

                    //ISSUE HERE. IF I COMMENT THIS LINE ALL GOES WELL BUT NO PROFILE PICTURES ARE DISPLAYED.
                    html += "<img id=\"imagem"+i+"\" src=\"http://graph.facebook.com/" + fb.from.id + "/picture\"/>";      

                    html += "<div id=\"textoFaceWall\">";

                    html += "<p id=\"msg"+i+"\">";


                    //adicionado fb.name em vez de fb.from.name:
                    if (fb.name == undefined) {
                          html += "<a href=\""+href+"\" target=\"_blank\">" + fb.from.name + "</a> - " + msg + "</p>";
                    } else {
                          html += "<a href=\""+href+"\" target=\"_blank\">" + fb.name + "</a> - " + msg + "</p>";
                    }

                    html += "<p class=\"dataPostWall\" id=\"data"+i+"\">"+ dataFinal + "</p> ";

                    html += "</p>";

                    html += "</div>";

                    html += "<img class=\"linhaHomePageCanais\"  src=\""+baseUrl+"/lib/img/linhaWall.png\" alt=\"linha wall\"/>";

            });

        html += "</div>";

        $("#coluna2").append(html);

    });


};

fbFetch();  

And part of the graph:

({
   "data": [
      {
         "id": "125120007543580_150880001634837",
         "from": {
            "name": "Some Name",
            "category": "Non-profit organization",
            "id": "125120007543580"
         },
{
         "id": "125120007543580_111122368963254",
         "to": {
            "data": [
               {
                  "name": "Some Name",
                  "category": "Non-profit organization",
                  "id": "125120007543580"
               }
            ]
         },

I need to display the profile from fb.to.data.id, I now notice, however, that data has [ instead of {, and that could mean that, in order to access id, I need to use another syntax perhaps?

Since the to parameters can holds more that one user, it's an array of objects. So you need to loop over that too:

if(fb.to) {
    $.each(fb.to.data, function(j,to_user) {
        // now you access it to_user.id
    });
}

If you only want to show the first profile picture then use fb.to.data[0].id.

EDIT:
Okay, based on your comments and updated, here is your code with a working approach:

function fbFetch(){
        var url = "https://graph.facebook.com/125120007543580/feed&callback=?&limit=2";
    var i = 0;
        //Use jQuery getJSON method to fetch the data from the url and then create our unordered list with the relevant data.
    $.getJSON(url,function(json){
        var html = "<div id=\"faceWall\">";
            //loop through and within data array's retrieve the message variable.
            $.each(json.data,function(i,fb){
                    var idTotal = fb.id;
                    var ids = idTotal.split("_");
                    var href = "http://www.facebook.com/"+ids[0]+"/posts/"+ids[1];
                    var msg = fb.message;
                    //adicionado 
                    if (msg == undefined) {
                        msg = 'Cick here to see the post title';
                    } else if (msg.length > 150) {
                        msg = msg.substr(0,200)+"...";
                    } 
                    //ISSUE HERE. IF I COMMENT THIS LINE ALL GOES WELL BUT NO PROFILE PICTURES ARE DISPLAYED.
                    if(fb.from)
                        html += "<img id=\"imagem"+i+"\" src=\"http://graph.facebook.com/" + fb.from.id + "/picture\"/>";

                    if(fb.to) {
                        $.each(fb.to.data, function(j,to_user) {
                            html += "<img id=\"imagem"+i+"-"+j+"\" src=\"http://graph.facebook.com/" + to_user.id + "/picture\"/>";
                        });
                    }

                    html += "<div id=\"textoFaceWall\">";
                    html += "<p id=\"msg"+i+"\">";
                    //adicionado fb.name em vez de fb.from.name:
                    if (fb.name == undefined) {
                          html += "<a href=\""+href+"\" target=\"_blank\">" + fb.from.name + "</a> - " + msg + "</p>";
                    } else {
                          html += "<a href=\""+href+"\" target=\"_blank\">" + fb.name + "</a> - " + msg + "</p>";
                    }
                    html += "<p class=\"dataPostWall\" id=\"data"+i+"\">"+ dataFinal + "</p> ";
                    html += "</p>";
                    html += "</div>";
                    html += "<img class=\"linhaHomePageCanais\"  src=\""+baseUrl+"/lib/img/linhaWall.png\" alt=\"linha wall\"/>";
            });
        html += "</div>";
        $("#coluna2").append(html);
    });
};
fbFetch();

You may try this for PHP

$request_url = 'http://graph.facebook.com/redbull/picture?redirect=false';  
$requests = file_get_contents($request_url);  
$fb_response = json_decode($requests);  
$imagen[]=$fb_response->data->url;  

There you get the URL of the picture from the URL item in the JSON Graph api call.