使用API​​結果創建另一個請求並一起顯示

Question

我在從API檢索某些數據時遇到問題，服務器提供了JSON數據，如下所示：

http://segue-api.fisl16.softwarelivre.org/api/rooms/1/slots

http://segue-api.fisl16.softwarelivre.org/api/talks/526 （數字是通話ID）

我需要創建一個表以可視化與我相關的數據。 因此，我創建了一個簡單的JS函數，以從第一個鏈接（/ rooms / 1 / slots）檢索信息並提供HTML表（下面的代碼）。

使用ID，我可以從要向API發出另一個請求的第一個函數（/ talks /“ id”）中收集ID，並將結果顯示在與ID相同的行上。

最終結果將是摘錄中的表格，其中包含名為“ description”的新列，該列包含與“ id”相同的行上的API（/ talks /“ id”）上可用的描述。

我一無所知，有什么想法嗎？

  var room1 = "http://segue-api.fisl16.softwarelivre.org/api/rooms/1/slots" $.getJSON(room1,function(data){ $.each(data.items, function(){ $("#table").append("<tr><td>"+this['begins']+"</td><td>"+this['talk'].id+"</td><td>"+this['duration']+"</td><td>"+this['talk'].title+"</td><td>"+this['talk'].owner+"</td><td>"+this['talk'].coauthors+"</td><td>"+this['room_name']+"</td>"); }); }); 

 table, th, td { border: 1px solid black; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <table id="table"> <th>Data e Hora</th> <th>Id</th> <th>Duração</th> <th>Título</th> <th>Palestrante</th> <th>co-palestrantes</th> <th>sala</th> </table> 

Answer 1

如果您無法一次從第二個API獲得多個ID的數據，則它可能會循環生成子查詢（ http://jsfiddle.net/tmjvzo63/ ）：

room1 = "http://segue-api.fisl16.softwarelivre.org/api/rooms/1/slots";
$.getJSON(room1,function(data){
$.each(data.items, function(){
    var rid = "r"+this['talk'].id;
    $("#table").append("<tr id='"+rid+"'></tr>");
    $("#"+rid).append("<td>"+this['begins']+"</td><td>"+this['talk'].id+"</td><td>"+this['duration']+"</td><td>"+this['talk'].title+"</td><td>"+this['talk'].owner+"</td><td>"+this['talk'].coauthors+"</td><td>"+this['room_name']+"</td>");
    var rj = "http://segue-api.fisl16.softwarelivre.org/api/talks/"+this['talk'].id;
    $.getJSON(rj,function(data){
        console.log(data.resource.id);
        $("#r"+data.resource.id).append("<td>"+data.resource.full+"</td>");
    });
});
});

Answer 2

你可以做類似的事情

$.getJSON(room1,function(data){
    $.each(data.items, function(){
      var row = item;
      $.getJSON("http://segue-api.fisl16.softwarelivre.org/api/talks/" + item["talk"].id, function(dataItem){
        var $table = $("#table");
        if ($table.find("th:last").text() !== "Description") { //Or whatever it is named
          $table.find("th:last").after("<th>Description</th>"); //This creates the TH if it doesn't exist
        }
        $table.append("<tr><td>"+item['begins']+"</td><td>"+item['talk'].id+"</td><td>"+item['duration']+"</td><td>"+item['talk'].title+"</td><td>"+item['talk'].owner+"</td><td>"+item['talk'].coauthors+"</td><td>"+item['room_name']+"</td><td>" + dataItem.description + "</td>");
      })
    })
});