0

私は D3.js を Facebook PHP SDK と組み合わせて使用​​して、訪問者の友達を表示しています。各友達は、名前とプロフィール写真とともに小さな div に表示されます。

私の問題は、Facebook API がプロフィール写真への直接リンクを返さないことです。代わりに、のような URL を使用する必要がありhttps://graph.facebook.com/UserID/picture?redirect=false、画像への URL が JSON で返されます。他のすべてのフレンド データは既に取得され、Javascript 配列に格納されています。

ここで、これに対処するために AJAX 呼び出しを設定しましたが、非同期の性質のために機能しません。画像の URL が取得されると、DOM は既に読み込まれており、画像が取得されます<img src="undefined">。

main.js から

function ajax(path) {
  $.ajax({
    type: "GET",
    url: "ajax.php",
    data: {'path': path},
    success: function(data) {
        return data; //returned data is correct
    }
  })
}

// d3 code
profile.append("img")
  .attr("src", function(d) { return ajax(d.id); }) //this is "undefined"
  .attr("class", "thumb");

ajax.php から

$path = file_get_contents('https://graph.facebook.com/' . $_GET['path'] . '/picture?redirect=false');
echo json_decode($path)->data->url;
4

2 に答える 2

1

Ajax は非同期です。リクエストが完了するとコールバックが呼び出されます。代わりにこれを試してください。

function ajax(path, profile) {
  $.ajax({
    type: "GET",
    url: "ajax.php",
    data: {'path': path},
    success: function(data) {
        profile.append($('<img/>', {src: data, 'class': 'thumb'));
    }
  })
}

//d3
ajax(d.id, profile);
于 2013-09-04T01:25:38.940 に答える
1

何も返さない<imge src="undefined"ので取得します。ajaxコードを次のように変更します。

function ajax(path, callback) {
  $.ajax({
    type: "GET",
    url: "ajax.php",
    data: {'path': path},
    success: function(data) {
        callback(data);
    }
  })
}

と

var img = profile.append("img").attr("class", "thumb");
ajax(d.id, function(data) { img.attr("src", data); });
于 2013-09-04T01:27:40.027 に答える