D3 - Ожидание запроса $ .ajax для завершения

Question

Im работает над проектом d3, который втягивает json-файл с помощью d3.json(), а затем передает ответ другой функции с именем update(), которая проходит через массив и запускает ajax-вызов по каждому элементу и возвращает результаты. Затем я пытаюсь отфильтровать все элементы, которые имеют значение false для свойства htrans, которое добавляется как в функции успеха, так и в неудачные функции обратного вызова. Проблема, с которой я сталкиваюсь, заключается в том, что переменная worldMap, похоже, не обладает свойством htrans, когда я выполняю фильтр, но если я console.log элемент, я могу его увидеть. Я создал 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

Создайте новое обещание для своего мира.

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