2017-02-21 11 views
1

私はajax APIコールを使用してhtmlテーブルを作成しています。テーブルの最初の列は(item.name)であり、2番目の列に日付を設定するための2番目のajax呼び出しをネストしています(脇の下として、日付はエポックからマイクロ秒単位で返されます...私は後でこれを書式設定する)。私がネスティングしている理由は、2番目の呼び出しがURLの最初の呼び出しの結果の一部を使用しているためです。ここでは、コードは次のようになります。htmlテーブルに複数のajax呼び出しが正常に入力されました

HTML

<div id="output"> 
    <table id="scalaapi"> 
    <tbody> 
    <tr><td></td><td class="uuid"></td></tr> 
    </tbody> 
    </table> 
</div> 

AJAX

$.ajax({ 
type: 'GET', 
url: "https://avacmd25.scala.com:44335/ContentManager/api/rest/players?offset=0&sort=name&filters=%7BplayerStatus%20:%20%7Bvalues:%5B'HEARTBEAT_OVERDUE'%5D,%20comparator%20:%20'eq'%7D%7D", 
dataType: "json", 
success: function(data) { 
var list = data.list; 
$.each(list, function(i, item) { 
var tr = $('<tr>').append('<td>' + (item.name) + '</td>' + '<td>'+ 
    $.ajax({ 
    type: 'GET', 
    url: "https://avacmd25.scala.com:44335/ContentManager/api/rest/heartbeats/sequence/"+(item.uuid), 
    dataType: "text", 
    crossDomain: true, 
    success: $.each(function(results) { 
       $('.uuid').text(results); 
      }) 
    }) 
    + '</td>'); 
$("#scalaapi").append(tr); 
}); 
} 
}) 

それは最初の行を飛ばしているが、私は、予想通り最初のAPI呼び出しが動作している...混合結果を取得しています。 第2のAPI呼び出しの最初のレコードだけを返していると、それは最初の行をスキップしていないと、後続の行は、[オブジェクトのオブジェクト]を表示し

resutsのスクリーンショット - あなたがやっている

enter image description here

答えて

2

AJAXの呼び出しが最初に完了するのを待つことなく、すぐに何かをやっているあなたのコードの中にたくさんあります。

$.ajax({..., success: function(data) { 
    // when we get here the first AJAX call has returned 

    // loop through each item in the response from the first AJAX call 
    $.each(data.list, function(i, item) { 
     // append the <tr> to the table with the information we have for the item and a placeholder for the second cell 
     var tr = $('<tr><td>'+item.name+'</td><td class="uuid">...</td></tr>').appendTo('#scalaapi'); 

     // make the second AJAX call for this item 
     $.ajax({ 
      url:".../sequence/"+item.uuid, 
      ..., 
      success: function(result) { 
       // we now have the contents we need for the second <td>, so insert it 
       tr.find('.uuid').text(result); 
      } 
     }); 
    }); 
}); 

私は信じている意志:もう少し患者(以下、私はうまくいけば、それをより明確にするために余分なAJAXの設定のもののほとんどを取り除かました擬似コードどのようなコードがやっているのである)であるためにあなたのjavascriptを再構築してみてくださいあなたがしようとしているものに近づけますか?

+0

ありがとうございました。 – KevMoe

関連する問題