JSON出力はコード内で未定義のままですが、アラートは問題ありませんが、これはスコープに問題がありますか？

Question

FacebookのグラフAPIを使用して、ユーザーのフレンドリストを取得し、テンプレートとランダムな友だちに基づいてステータスメッセージを生成しています。 return(response);の代わりにalert(response.data[0].name);を使用すると、私のコードが動作し、最初のFacebookの友人の名前がわかります。私のコードでそれをさらに使うと、定義されていないエラーが発生します。数時間かけて問題を解決しようとしていますが、これ以上のレスポンスやJSONフォーマットの問題を使用できないスコープに関する問題があると思います。私はjQueryのJSON解析も試してみましたが、そこには何も追加できませんでした。

shuffle = function(v){ 
    for(var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x); 
    return v; 
}; 

function getFriends() { 
    FB.login(function(response) { 
     if (response.session && response.perms) { 
     FB.api('/me/friends', function(response) { 
      return response; 
     }); 
     } 
    } , {perms:'publish_stream'}); 
}; 

function selectFriend(){ 
    var friends = getFriends(); 
    friends = friends.data[0]; 
    var findex = friends.length 
    var randomNumber = (Math.floor(Math.random() * 10) % findex); 
    return(friends[randomNumber].name); 
}; 

function process(status){ 
    status = status[0].toString(); 
    var cindex = status.indexOf("{{friend}}"); 

    while (cindex != -1){ 
     status = status.replace("{{friend}}",selectFriend()); 
     cindex = status.indexOf("{{friend}}"); 
    } 
    return(status); 
}; 

function newStatus(){ 
    var status = [ 
     "This status is named {{friend}}", 
     "This status loves {{friend}} but likes {{friend}} too.", 
     "This status goes by {{friend}} but you can call it {{friend}} if you like.", 
     "This status hates {{friend}}" 
    ]; 

    status = shuffle(status); 
    $('#status').text(process(status)); 
} 

コードは、クリック時にnewStatus（）を呼び出すことから始まります。

EDIT：

shuffle = function(v){ 
    for(var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x); 
    return v; 
}; 

function newStatus(){ 
    var status = [ 
     "This status is named {{friend}}", 
     "This status loves {{friend}} but likes {{friend}} too.", 
     "This status goes by {{friend}} but you can call it {{friend}} if you like.", 
     "This status hates {{friend}}" 
    ]; 
    status = shuffle(status); 
    status = status[0].toString(); 

    FB.login(function(response) { 
     if (response.session && response.perms) { 
     FB.api('/me/friends', function(response) { 
      var friends = response.data; 
      var findex = friends.length 

      var cindex = status.indexOf("{{friend}}"); 

      while (cindex != -1){ 
       var randomNumber = (Math.floor(Math.random() * 10) % findex); 
       var name = friends[randomNumber].name; 

       status = status.replace("{{friend}}",name); 
       cindex = status.indexOf("{{friend}}"); 
      } 
      $('#status').text(status); 
     }); 
     } 
    } , {perms:'publish_stream'}); 
} 

Answer 1

問題はFBのAPIへの呼び出しは非同期であることをおそらくです：ここで私はjfriend00の答えの後に動作するように私のコードをリファクタリングする方法です。つまり、FB.api（）を呼び出すと、FBへのajax呼び出しが開始されます。そのajax呼び出しが完了している間、あなたの他のコードは引き続き実行されます。実際、getFriendsの呼び出しは終了し、selectFriend（）の残りの部分はFB ajax呼び出しが完了する前に実行されます。

次に、FB APIコールが完了すると、完了関数が呼び出されます（おそらくアラートを送信した場所）。あなたのコードでは、あなたは完成関数で意味のある何もしていません。応答を返すだけです

return response; 

しかし、これは何も役に立ちません。その戻り値はgetFriends（）関数からの戻り値ではありません。これは、AJAXエンジンの中の何かへの戻りです。

FB.api(の応答で有用なことを行う場合は、そのコードを実行するか、FB.api()呼び出しで指定された完了関数からそのコードを呼び出す必要があります。

あなたは、この擬似コードのような何かをしなければならないでしょう：

function getFriends() { 
    FB.login(function(response) { 
     if (response.session && response.perms) { 
     FB.api('/me/friends', function(response) { 
      var friends = response.data[0]; 
      var findex = friends.length 
      var randomNumber = (Math.floor(Math.random() * 10) % findex); 
      var name = friends[randomNumber].name; 
      // now continue on with whatever you want to do with the random friend info 
      // you cannot just return data from this callback, you have to actually carry 
      // out whatever you were going to do with the data here 
     }); 
     } 
    } , {perms:'publish_stream'}); 
}; 

function selectFriend(){ 
    getFriends(); 
    // the getFriends() function is asynchronous and the FB.api() call has not yet 
    // completed so we can't do anything here yet as we have to wait for the 
    // FB.api() call to finish first. 
};