D3 - $ .ajaxリクエストの完了を待って

Question

d3.json（）を使用してjsonファイルを取得し、配列をループして実行するupdate（）という別の関数に応答を渡すd3プロジェクトに取り組んでいます。 ajaxは各項目を呼び出し、結果を返します。私は、成功したコールバック関数と失敗したコールバック関数の両方に追加されたhtransプロパティに対してfalseが定義されているすべての項目をフィルタリングしようとしています。私が抱えている問題は、worldMap変数は、私がそれを見ることができる要素をconsole.logにすれば、フィルタを実行しているときにhtransプロパティを持たないように見えるということです。機能をデモするためにcodepenを作成し、以下のコードも含めました。

これは、約束を返すことと関係があり、フィルタを実行しているときにworldMapが完全に完了していない可能性があることを知っています。どのようにこれを解決するための任意のアイデア？

var url = "https://gist.githubusercontent.com/jkeohan/d77d5ab47e018defe48d54f59acefb65/raw/ff61673eff2e7bf610c5a426c5bd9ca46da2a9da/worldmap_geojson.json"; 

d3.json(url,function(err, world) { 
    var worldMap = update(world); 
    worldMap.features.filter(function(d){ 
    if (d) { console.log(d.htrans); return d }; // this doesn't have the htrans property 
    }); 
    console.log(worldMap); // this displays the the htrans property 
}); 

function update(obj){ 
    obj.features.filter(function(d,i) { 
    var code = d.properties.iso_a2.toLowerCase(); 
    var url = "https://www.googleapis.com/language/translate/v2?key=AIzaSyAADudga5Cdk2QlHDWF8UAHQEy-Z_ikHw8&target=" + code + "&q=Hello"; 
    return $.when(ajaxCall(url)).then(doneCB, failCB); 

    function doneCB(data){ 
    d.hello = data.data.translations[0].translatedText; 
    d.htrans = true; 
    //console.log(d) 
    return d; 
    } 

    function failCB(data){ 
    d.hello = ""; 
    d.htrans = false; 
    //console.log(d) 
    return d; 
    }; 

    function ajaxCall(url) { 
    return $.ajax(url); 
    }; 

});//filter 
return obj; 
}; 

Answer 1

あなたのworldMapに新しい約束をしてください。

d3.json(url,function(err, world) { 
    var worldMap = new Promise(function(resolve, reject){ 
     update(world, resolve,reject); 
    }) 

    worldMap.then(//do something if worldMap promise resolves something good 
     function(val){   
     val.features.filter(function(d){ 
      if (d) { 
       console.log(d.htrans); 
      }; 
     }); 
     } 
) 
    .catch(// if error happened inside promise 
    function(reason) { 
     console.log('reason'); 
    }); 

}); 

そして、このようにこの約束解決：

function update(obj, resolve, reject){ 
    obj.features.filter(function(d,i) { 
    var code = d.properties.iso_a2.toLowerCase(); 
    var url = "https://www.googleapis.com/language/translate/v2?key=AIzaSyAADudga5Cdk2QlHDWF8UAHQEy-Z_ikHw8&target=" + code + "&q=Hello"; 
    return $.when(ajaxCall(url)).then(doneCB, failCB); 

    function doneCB(data){ 
    d.hello = data.data.translations[0].translatedText; 
    d.htrans = true; 
    //console.log(d) 
    resolve(d); //resolve on success 
    } 

    function failCB(data){ 
    d.hello = ""; 
    d.htrans = false; 
    //console.log(d) 
    reject(d); //reject on error 
    }; 

    function ajaxCall(url) { 
    return $.ajax(url); 
    }; 

});//filter 
return obj; 
}; 

を見てみましょう：嬉しいhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise