FB.api() causing other variables to become undefined

I am having a bit of trouble with the Facebook JS SDK, specifically when using the FB.api() method. I have a list that gets populated from calling a php script using JQuery.get(), and with it, for each list item, comes the Facebook User ID. There are three types of "list items" that have different HTML for each, and I need to make a FB.api() call for each item, because each will come from a different user.

Here is the code I'm currently working with:

function( data ){ 

        // Parse the json data
        var parsed = jQuery.parseJSON( data );

        // Create arrays for each message type
        notifications = parsed.notifications;
        gifts = parsed.gifts;
        requests = parsed.requests;

        // Counter and message to add
        var i = 0;
        var message = '';
        var userData;
        var displayPicUrl = '';

        //
        // NOTIFICATIONS
        //

        if( notifications && notifications.length > 0 ) {

            // Loop through and create a new list item for each notification
            for( i = 0; i < notifications.length; i++ ) {

                // Get originator user data
                FB.api( notifications[i].originator, function( response ) { 

                    userData = response;

                    displayPicUrl = "http://graph.facebook.com/"+userData.id+"/picture";

                    message = '<li class="message">' +
                                '<img src="'+displayPicUrl+'" width="50" height="50" alt="Not one of the five birds I know." title="Not one of the five birds I know" />'+
                                '<p class="messageText">'+notifications[i].message+'.</p>' +
                                '<button class="acceptButton">Ok</button>' +
                                '</li>';

                    document.getElementById( 'notifications' ).innerHTML += message;
                });
            } //end loop

        } //end if

        //
        // GIFTS
        //

        if( gifts && gifts.length > 0 ) {

            // Loop through and create a list item for each gift
            for( i = 0; i < gifts.length; i++ ) {

                FB.api( gifts[i].originator, function( response ) {

                    if( !response || response.error ) {

                        alert( 'An error occured retrieving gifts')

                    } else {

                        userData = response;


                        displayPicUrl = "http://graph.facebook.com/"+userData.id+"/picture";

                        message = '<li class="message">' +
                            '<img src="'+displayPicUrl+'" width="50" height="50" alt="Not one of the five birds I know." title="Not one of the five birds I know" />'+
                            '<img class="giftImage" src="'+gifts[i].url+'" width="50" height="50" title="'+gifts[i].name+'" alt="'+gifts[i].name+'" />' +
                            '<p class="messageText">'+gifts[i].message+'</p>' +
                            '<button class="declineButton giftDecline">Decline</button>' +
                            '<button class="acceptButton giftAccept">Accept Gift</button>' +
                            '<span style="display:none;" id="giftId">'+gifts[i].giftId+'</span>' +
                            '</li>';

                        document.getElementById( 'gifts' ).innerHTML += message;

                    }

                });
            }
        } // end if

        //
        // REQUESTS
        //

        if( requests && requests.length > 0 ) {

            // Loop through and create a list item for each request
            for( i = 0; i < requests.length; i++ ) {

                FB.api( requests[i].ori开发者_Go百科ginator, function( response ) {

                    if( !response || response.error ) {
                        alert( 'An error occured retrieving Requests' );
                    } else {

                        userData = response;

                        displayPicUrl = "http://graph.facebook.com/"+userData.id+"/picture";

                        message = '<li class="message">' +
                           '<img src="'+displayPicUrl+'" width="50" height="50" alt="Not one of the five birds I know." title="Not one of the five birds I know" />'+
                            '<img class="giftImage" src="'+requests[i].url+'" width="50" height="50" />' +
                            '<p class="messageText">'+requests[i].message+'</p>' +
                            '<button class="declineButton requestDecline">Decline</button>' +
                            '<button class="acceptButton requestAccept">'+requests[i].okButtonLabel+'</button>' +
                            '</li>';

                        document.getElementById( 'requests' ).innerHTML += message;
                    }
                });
            }
        } // end if

The problem that I seem to be having is that once it hits the parts for Gifts and Requests, both the Gifts and Requests arrays become "undefined," which is odd because the code works perfectly fine when it's not wrapped in the callback of FB.api()... And, oddly enough, this problem does not seem to occur for the Notifications section. The gifts, requests, and notifications are just arrays of objects returned from the database as I said using JQuery.get() and there are no problems until I wrap the stuff in the api() method.

Any help would be greatly appreciated.

Cheers

---

If they are undefined only when wrapped in a FB.api() then your getting a facebook error. There are many reasons that this can happen, so its hard to pinpoint the exact cause, but I'll throw out a few ways that I deal with these:

• Add an access token to your graph call, some facebook calls require it.

• You need to make sure that you're application has the proper facebook code in it. For HTML include:

  You also need to include this code in some document.ready sort of call:

  //Facebook iFrame include
  window.fbAsyncInit = function () {
      FB.init({ appId: AppID, status: true, cookie: true, xfbml: true });
      FB.Canvas.setAutoResize();
  };
  
  (function () {
      var e = document.createElement('script');
      e.async = true;
      e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
      document.getElementById('fb-root').appendChild(e);
  } ());
  

• There may be a problem with how you set this up in facebook. Make sure that all URLs match. If they do not then your application will throw errors. This must be exact (www.ex.com and ex.com are different, and only one will work)

Make sure that under "On Facebook" Canvas URL and Tab URL match as well

• Your graph call is wrong. Try adding an alert(displayPicUrl); call to your code, it may show you what errors you are getting. If that doesn't work, then try to reproduce the graph url call and enter that in yourself to see what that returns.

Hopefully one of those work