JavaScript関数からのデータの返却

Question

私は正しく表示することを要求しているデータの取得に問題があり、未定義と表示されていました。

fetch(url) 
.then(res => res.json()) 
.then((manager) => { 
/* console.log(manager); */ 
    for (i in manager.data){ 
     var row = $('<div id="Data">' + '<br>' + getLogo(manager, i) + '<br>' 
       + '<br>' + '<p1>' + getName(manager, i) + '</p1>' 
       + getAdd1(manager, i) + getAdd2(manager, i) + getAdd3(manager, i) 
       + getCity(manager, i) + getPcode(manager, i) 
       + '<br>' + getCountry(manager, i) + '<br>' 

私の問題は、いくつかの研究の後、私は問題ははgetCountryメソッドは、それがコードの残りの部分との運びととして、それを表示する限りであることだったと思うはgetCountry

   + '<br>' + getWeb(manager, i) + '<br>' 
       + '<br>' + getPhases(manager, i) 
       + '<br>' + getPspon(manager, i) 
       + '<br>' + getOspon(manager, i) + '<br>' 
       + '<br>' + getDesc(manager, i) + '<br>' 
       + '<br>' + '</div>' + '<br>'); 

     $('#Results').append(row); 
    }   
}) 
}; 

への呼び出しであります未定義。

私はPromisesを見て、これを関数に追加しようとしましたが、htmlページに[object Promise]と表示されます。 getCountry関数は以下に示され、Promiseコードを追加する前と同じでした。

は、これは私が国コードのための

アドレスがあることをチェックして、チェックを達成しようとしていますものです。国番号を3桁の国番号に割り当てます。次に、ISO 3166データを含むJSONをロードして、これを検索可能なオブジェクトにロードします。 countryに格納されている値に一致するオブジェクトを検索します。その後、一致したオブジェクトのnameフィールドをresultに割り当て、それを返してアドレスの最後に表示します。

function getCountry(manager, i){ 
    return new Promise(function(resolve, reject) { 
     if(manager.data[i].attributes.addresses[0] != null && manager.data[i].attributes.addresses[0].country != null){ 
      var country = manager.data[i].attributes.addresses[0].country; 
      var c = country.toString(); 
      let url = 'http://data.okfn.org/data/core/country-codes/r/country-codes.json'; 
      fetch(url) 
      .then(res => res.json()) 
      .then((data) => { 
      console.log(data); 
      console.log(manager); 
         for(var i=0, length=data.length; i<length; i++){ 
         if(data[i].M49 === c){ 
          var result = data[i].name; 
          console.log(result); 
          Promise.resolve(result); 

         } 
        } 
      }) 
     } 
     else { 
      var reason = " "; 
      Promise.reject(reason); 
     } 
    } 
    ); 
} 

どこが間違っていますか？

（24回）これは私がクロームコンソールで見たものである@Zohaib Ijaz提案

fetch(url) 
.then(res => res.json()) 
.then((manager) => { 
/* console.log(manager); */ 
    for (i in manager.data){ 
     /* use a Promise in order to receive the result for the below function */ 
     getCountry(manager, i).then((cm)=> { 
     var row = $('<div id="Data">' + '<br>' + getLogo(manager, i) + '<br>' 
       + '<br>' + '<p1>' + getName(manager, i) + '</p1>' 
       + getAdd1(manager, i) + getAdd2(manager, i) + getAdd3(manager, i) 
       + getCity(manager, i) + getPcode(manager, i) 
       + '<br>' + cm + '<br>' 
       + '<br>' + getWeb(manager, i) + '<br>' 
       + '<br>' + getPhases(manager, i) 
       + '<br>' + getPspon(manager, i) 
       + '<br>' + getOspon(manager, i) + '<br>' 
       + '<br>' + getDesc(manager, i) + '<br>' 
       + '<br>' + '</div>' + '<br>'); 

     $('#Results').append(row); 
     }); 
} 
}); 
} 

はgetCountry機能

function getCountry(manager, i){ 
    return new Promise(function(resolve, reject) { 
    if(manager.data[i].attributes.addresses[0] != null && manager.data[i].attributes.addresses[0].country != null){ 
     var country = manager.data[i].attributes.addresses[0].country; 
     var c = country.toString(); 
     let url = 'http://data.okfn.org/data/core/country-codes/r/country-codes.json'; 
     fetch(url) 
     .then(res => res.json()) 
     .then((data) => { 
        for(var i=0, length=data.length; i<length; i++){ 
         if(data[i].M49 === c){ 
         var result = data[i].name; 
         /* console.log(result); */ 
         resolve(result); 
         } 
         else { 
         var reason = ""; 
         reject(reason); 
         } 
        } 
     }) 
    } 
    else { 
     var reason = ""; 
     reject(reason); 
    } 

} 
); 
} 

を使用してコードを更新しました

キャッチされません（約束どおり）test.html：1

Answer 1

getCountryは同期関数呼び出しではありません。あなたは応答を待つ必要があります。

fetch(url) 
.then(res => res.json()) 
.then((manager) => { 
/* console.log(manager); */ 
    for (i in manager.data){ 
     getCountry(manager, i).then((cm)=> { 
      // Add other values as well. 
      var row = $('<br>' + cm + '<br>'); 
      $('#Results').append(row); 
     }); 
    } 
}); 

Answer 2

私が気づいたのは、Promise.resolve(result)です。関数の開始時にPromiseをインスタンス化したときは、resolveとrejectという2つの引数を持つ関数を渡しました。それらはプロミスを「終了」するために使用するべきものなので、それらをただresolve(result)とreject(reason)に変更すると、プロミスが正しく解決するはずです。

言い換えれば、約束のポイントは、「これをして、それが完了したら、.thenこの他のことをやってください」と言うことです。だから、私はあなたが連結の途中で関数を呼び出しているので、約束はうまくいくことはよく分からない

getCountry(manager, i).then(function(result) { 
    // result is whatever you passed into resolve() in getCountry 
    // everything in here is done after getCountry finishes running 
    // and returns a value 
}, function(rejection) { 
    // rejection is whatever you passed into reject() in getCountry 
    // this only happens if things didn't work 
} 

ようなものが必要だろう。他の関数が非同期呼び出しを行う場合は、すべての非同期関数をPromisesとして書き換え、次にPromise.all（）を使用してそれらをすべて連結してからHTMLに連結するまで待ってください。このようなもの

var p1 = getLogo(manager, i); 
var p2 = getName(manager, i); 
var p3 = getAdd1(manager, i); 
... 

Promise.all([p1, p2, p3]).then(function(results) { 
    results.join('<br>') 
    // Whatever else you want to happen once all the functions are finished. 
})