Ajaxコールの配列を構築するときにJQuery Ajax成功コールバックが機能しない

Question

別の配列に基づいて構築された約束事を解決してオブジェクトの配列を構築する必要があります。

私はletters = ['a', 'b', 'c']の配列を持っているとしましょう。その後、私はこのように、それはAjaxがPARAMとして各文字を使用して呼び出して作るマップ：結果

var result = letters.map(function (letter) { 
 
    return $.getJSON('myuri', { param: letter }); 
 
};

、私はアヤックスの約束を持つ配列を取得します。それから私はこのようにそれを解決：

Promise.all(result).then(function (response) { 
 
    console.log(response); 
 
});

ログはすべてのAJAX呼び出しのために元の応答を印刷しています。それまではすべてがうまくいきます。

var letters = ['a', 'b', 'c']; 
 

 
var result = letters.map(function (letter) { 
 
    return $.getJSON('myuri', { param: letter }) 
 
      // Chaining with success callback 
 
      .done(function (response) { 
 
       return { 
 
        'custom_attr': response.x, 
 
        'athor_custom_attr': response.y 
 
       }; 
 
    }); 
 
}); 
 

 
Promise.all(result).then(function (response) { 
 
    console.log(response); 
 
});

問題は成功コールバックです：しかし、私はこのように、私はそれらを作成するためのAjaxの成功コールバックを使用してみましたので、私は、カスタムオブジェクトをしたい、オリジナルの応答をしたくありませんアレイ作成時に干渉しません。実際には、コールバックの何かへのリターンを変更することはできますが、それは何の違いもなく、コードは元の応答の配列を返します。

$httpサービスを使用してAngularでこれを実行したとき、それは正常に機能しましたが、$.getJSONを使用するJQueryでは機​​能しません。なぜこれが起こっているのか理解できません。

ありがとうございます。

Answer 1

あなたのコールバックdoneを使用したため、戻り値は無視されます。

var result = letters.map(function (letter) { 
    return $.getJSON('myuri', { param: letter }) 
     .then(function (response) { 
      return { 
       'custom_attr': response.x, 
       'athor_custom_attr': response.y 
      }; 
     }); 
}); 

done方法が連鎖可能なされていない：あなたが実際に望んでいたことは、コールバックの結果のための新たな約束を作成するthenを使用することです！then以上に使用する理由はほとんどありません。

Answer 2

私のコメントで述べたように、各jqXHRの応答データを必要なカスタムオブジェクトにマップするだけでよいと思います。

だから、のようなもの：

Promise.all(result).then(function (response) { 
    result = response.map(function(c) { 
     return { 
      'custom_attr': c.x, 
      'another_custom_attr': c.y 
     }; 
    }); 
}); 

これはvar result;はここにアクセス可能になる範囲内で宣言されたと仮定しています。

[ 
    {custom_attr: "a"}, 
    {custom_attr: "b"}, 
  {custom_attr: "c"} 
] 

：だから、一日の終わりに、 resultがに等しい

<?php 
// json.php 
header('Pragma: no-cache'); 
header('Cache-Control: no-store, no-cache, max-age=0, must-revalidate'); 
header('Content-Type: application/json'); 

echo json_encode($_GET); 
?> 

：

<!-- index.html --> 
<button class="load-ajax">Click To Make our AJAX calls!</button> 
<script src="jquery.min.js"></script> 

<script> 
// Declare `result` in global scope. 
var result; 

$(document).ready(function() { 
    $('.load-ajax').on('click', function(e) { 
     e.preventDefault(); 

     var letters = ['a', 'b', 'c']; 
     result = letters.map(function (letter) { 
      return $.getJSON('json.php', { param: letter }); 
     }); 

     Promise.all(result).then(function (response) { 
      result = response.map(function(c) { 
       return { "custom_attr" : c.param }; 
      }); 
      console.log("DONE! Look at `result`"); 
     }); 
    }); 
}); 
</script> 

およびサンプルjson.phpファイル：

---

はここで完全なサンプルです