How to keep "response" out of FB.api

Question

I am just trying FB JS api and want to know whether or how I can still use "response" out of FB.api. For example:

var picture;
FB.api('/me/picture?width=180&height=180', function (response) {
            picture = response.data.url;
            console.log(picture);
});
alert(picture);

The above code will show "undefined" in alert window.

Is there a way to use "response.data.url" out of FB.api?

Thanks

Update: Here is the big picture: I need retrieve some information from FB user account, such as /me/name, /me/address/city, /me/picture.data.url and group them together and then send the information to server through AJAX.

var name;
var city;
var picture;

FB.api('/me', function (response) {
    name = response.name;
    FB.api('/me/address', function (adrresponse) {
        city = adrresponse.city;
    }
    FB.api('/me/picture', function (imgresponse) {
        picture = imgresponse.data.url;
    }
    //since FB API is async, the following is not correct!!!
    var params = "name="+name+"&city="+city+"&picture="+picture;

    //send out through AJAX.
    var http = new XMLHttpRequest();
    http.open("POST", url, true);
}

Is there a better way to finish the above job?

Update 2: The best way is to use fields expansion https://developers.facebook.com/docs/graph-api/using-graph-api/v2.3#fieldexpansion, as shown by the answer of this question. Thanks Derek

Answer 1

The problem is the picture variable is not populated at the time that the alert fires. It will only be populated after the FB.api callback completes.

var picture;
FB.api('/me/picture?width=180&height=180', function (response) {
            picture = response.data.url;
            // this would work correctly
            alert(picture);
});

What are you attempting to do with the picture variable? Perhaps you should call a function do something with the picture inside your callback:

var picture;
FB.api('/me/picture?width=180&height=180', function (response) {
            picture = response.data.url;
            doSomethingWithPicture(picture);
});

Update

The simple way to achieve what you are after is this:

FB.api('/me', function (response) {
  var name = response.name;
  FB.api('/me/address', function (adrresponse) {
    var city = adrresponse.city;
      FB.api('/me/picture', function (imgresponse) {
         var picture = imgresponse.data.url;
         doAjax(name, city, picture);
      }
  }
}

function doAjax(name, city, picture) {
   //since FB API is async, the following is not correct!!!
   var params = "name="+name+"&city="+city+"&picture="+picture;

   //send out through AJAX.
   var http = new XMLHttpRequest();
   http.open("POST", url, true);
}

However, this is not ideal as you have to wait for /me/address before you can call /me/picture.

Here are some other options

1. you need to call /me first.
2. you fire off both api calls and execute code when the both complete

Ways to accomplish #2

• You could then use a promise library to chain the /me/address and /me/picture/. See: https://github.com/kriskowal/q or https://api.jquery.com/category/deferred-object/ to get started
• Call a callback after each that conditionally fires the ajax if both address and picture are set
• I am sure there are a number of other ways:
  • How to chain ajax requests?
  • How to chain ajax calls using jquery

Update #2

This is the best way to accomplish what you are after (no additional callbacks required)

FB.api('/me', {fields: ['first_name', 'last_name', 'picture', 'address']}, function(response) {
    // response will now have everything you need
    console.log(response);
});

I did not give this answer originally as it was not the topic of the question which seemed to be scoping.