php - Async ajax calls messes up image source -

i'm using d3.js in conjunction facebook php sdk display visitors friends. each friend displayed in small div name , profile picture.

my problem facebook api doesn't return direct link profile picture. instead, have use url https://graph.facebook.com/userid/picture?redirect=false, , url picture returned in json. other friend data fetched , stored in javascript array.

now, set ajax call deal this, doesn't work because of asynchronous nature. once picture urls fetched, dom loaded , images <img src="undefined">.

from main.js

function ajax(path) {   $.ajax({     type: "get",     url: "ajax.php",     data: {'path': path},     success: function(data) {         return data; //returned data correct     }   }) }  // d3 code profile.append("img")   .attr("src", function(d) { return ajax(d.id); }) //this "undefined"   .attr("class", "thumb"); 

from ajax.php

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

ajax asynchronous, call gets called when request done, try instead :

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