Accessing variable inside of FB.login function

Question

Please take a look at this function:

loginButton.on('click', function(e) {
    e.preventDefault();
    FB.login(function(response) {
        var gender;
        var events = [];
        if (response.status === 'connected') {
            userID = response.authResponse.userID;
            var accessToken = response.authResponse.accessToken;
            FB.api('/me/groups', {access_token : accessToken} ,function(res) {
                  for(var i = 0 ; i < res.data.length ; i++){
                        events.push(res.data[i].name);
                        $('#facebookGroups').append('<input type="radio" id="' + res.data[i].name + '"/>' + '<label for="' + res.data[i].name + '">' + res.data[i].name + '</label>').trigger('create');
                  }
            });
            FB.api('/me', {access_token : accessToken} ,function(respuesta) {
                  gender = respuesta.gender;
            });
            console.log(events);
            console.log(gender);
            $.ajax({
                type: 'GET',
                url:"http://127.0.0.1:3000/inituser",
                data: {
                    userGender : gender,
                    _id        : userID,
                    userEvents : events,
                    latitude   : userLatitude, 
                    longitude  : userLongitude,
                },
                dataType: 'jsonp',
                contentType: 'application/json',
                crossDomain: true,
                success: function(data){
                    console.log('data successfully sent');
                },
                error: function(){
                    console.log('there was an error');
                }
            });
            $.mobile.pageContainer.pagecontainer('change' , '#homepage');
            console.log(response);
        } else {
            $.mobile.pageContainer.pagecontainer('change' , '#login');
        }
    },{ scope: "email , user_groups , user_events" }); 
});

I cannot figure out how to access the gender and events variable. I need to send them to a remote server in the ajax call, but I cannot access them outside of the FB.api call. I tried declaring them in the global scope, right after the loginButton function, and as as you can see inside the FB.login function, but nothing is working.

It's obviously a scoping issue. Does anybody out there know if there is a solution?

Answer 1

First of all, instead of the two calls- /me/groups and /me(for gender) - you can use just a single API - /me?fields=gender,groups

The FB.api calls are asynchronous. So you have to proceed after the success callback is received. To do that, you can follow this structure-

loginButton.on('click', function(e) {
   e.preventDefault();
   FB.login(function(response) {
      var gender;
      var events = [];
      if (response.status === 'connected') {
         userID = response.authResponse.userID;
         var accessToken = response.authResponse.accessToken;

         GetUserDetails();   // 

      } else {
        $.mobile.pageContainer.pagecontainer('change' , '#login');
      }
  },{ scope: "email , user_groups , user_events" }); 
});

function GetDetails(){
   FB.api('/me?fields=gender,groups' ,function(res) {
       userId = res.id;
       gender = res.gender;
       for(var i = 0 ; i < res.groups.data.length ; i++){
          events.push(res.groups.data[i].name);
          $('#facebookGroups').append('<input type="radio" id="' + res.groups.data[i].name + '"/>' + '<label for="' + res.groups.data[i].name + '">' + res.data[i].name + '</label>').trigger('create');
       }
       console.log(events);
       console.log(gender);
       SendToAjax(userID, gender, events);
   });
}   

function SendToAjax(userID, gender, events){ 
    ....
     // your ajax call here
    ....
}