Retrieving value from javascript callback function

Question

var display_welcome = function(){
    var fb_login_button = jQuery('#fb_login_button');
    var fb_welcome = jQuery('#fb_welcome');
    var name = '';

    FB.api('/me',function(response){
        console.log(response);
        name = response.first_name;
    });

    fb_login_button.css('display', 'none');
    fb_welcome.html('<span>Welcome, ' + name + '</span>');
    fb_welcome.css('display', 'block');
};

This function is called when a user logs into Facebook from a website. The goal is to display a welcome message to the user with the user's first name. The problem is the variable 'name' is a local variable inside the scope of the callback method of FB.api(). What is the best way to extract this value and use it in my function 'display_welcome'?

Answer 1

The problem is that when you call the FB.api(...) function it is asynchronous, that is, your code doesn't stop and wait for the result, it doesn't wait for the callback you supply to be called. Instead the next three lines of code that display your welcome message will be executed before the callback occurs, which means the name variable will still be blank at the point you try to use it. The solution is as per the other answers, i.e., move your welcome message code into the callback function so that you don't try to use name until it has been set:

var display_welcome = function(){
  var fb_login_button = jQuery('#fb_login_button');
  var fb_welcome = jQuery('#fb_welcome'); 
  var name = '';

  FB.api('/me',function(response){
    console.log(response);
    name = response.first_name;
    fb_login_button.css('display', 'none');
    fb_welcome.html('<span>Welcome, ' + name + '</span>');
    fb_welcome.css('display', 'block'); };
  });
}

(As an aside, and this is my dislike of single-use variables talking: Unless you are using it elsewhere on your page (which presumably you are not since it is local to your display_welcome() function) you don't really need the name variable at all, just use response.first_name directly within the callback.)

Answer 2

How about moving those lines of code into the callback of the API? Like so:

var display_welcome = function(){ var fb_login_button = jQuery('#fb_login_button'); var fb_welcome = jQuery('#fb_welcome'); var name = '';

FB.api('/me',function(response){
    console.log(response);
    name = response.first_name;

    fb_login_button.hide();
    fb_welcome.html('<span>Welcome, ' + name + '</span>');
    fb_welcome.show();
});

};

Answer 3

I'd do:

jQuery(document).ready(function($){

    FB.api('/me',function(response){
        var fb_login_button = $('#fb_login_button'),
            fb_welcome = $('#fb_welcome');

        fb_login_button.css('display', 'none');
        fb_welcome.html('<span>Welcome, ' + response.first_name + '</span>')
                  .css('display', 'block');

    });
});

Answer 4

Put the rest of your code in the callback function.

Answer 5

I think it would be best to get user info by subscribing to an event after FB.init(). Something like this:

  window.fbAsyncInit = function() {
    FB.init({
      appId  : 'YOUR APP ID',
      status : true, // check login status
      cookie : true, // enable cookies to allow the server to access the session
      xfbml  : true  // parse XFBML
    });

     FB.Event.subscribe('auth.login', function(response) {
         // do something with response
         display_welcome();
     });

     FB.getLoginStatus(function(response) {
         if (response.session) {
             // logged in and connected user, someone you know
             display_welcome();
         }
     });
  };


var display_welcome = function(){

    FB.api('/me',function(response){
        var fb_login_button = jQuery('#fb_login_button');
        var fb_welcome = jQuery('#fb_welcome');
        var name = response.first_name;

        fb_login_button.css('display', 'none');
        fb_welcome.html('<span>Welcome, ' + name + '</span>');
        fb_welcome.css('display', 'block');
    });

};