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

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();
});

};