[英]Using API result to create another request and display them together
I'm having trouble retrieving some data from an API, the server provides JSON data as follows: 我在从API检索某些数据时遇到问题,服务器提供了JSON数据,如下所示:
http://segue-api.fisl16.softwarelivre.org/api/rooms/1/slots http://segue-api.fisl16.softwarelivre.org/api/rooms/1/slots
http://segue-api.fisl16.softwarelivre.org/api/talks/526 (the number is the talk id) http://segue-api.fisl16.softwarelivre.org/api/talks/526 (数字是通话ID)
I need to create a table to visualize the data that is relevant to me. 我需要创建一个表以可视化与我相关的数据。 So I created a simple JS function to retrieve information from the first link (/rooms/1/slots) and feed an HTML table (the code is below). 因此,我创建了一个简单的JS函数,以从第一个链接(/ rooms / 1 / slots)检索信息并提供HTML表(下面的代码)。
Using the ID I can gather from the first function I want to make another request to the API (/talks/"id") and display the results on the same row as the ID. 使用ID,我可以从要向API发出另一个请求的第一个函数(/ talks /“ id”)中收集ID,并将结果显示在与ID相同的行上。
The final result would be the table from the snippet with a new column called "description" which contains the description available on the API (/talks/"id") on the same row as the "id". 最终结果将是摘录中的表格,其中包含名为“ description”的新列,该列包含与“ id”相同的行上的API(/ talks /“ id”)上可用的描述。
I'm clueless, any ideas? 我一无所知,有什么想法吗?
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>
If you can not get the data from the second API for many ID at once, it can be in a loop to make subqueries ( http://jsfiddle.net/tmjvzo63/ ): 如果您无法一次从第二个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>");
});
});
});
You could do something like 你可以做类似的事情
$.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>");
})
})
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.