Using API result to create another request and display them together

Question

I'm having trouble retrieving some data from an API, the server provides JSON data as follows:

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)

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).

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.

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".

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>

It isn't clear enough what you want to display. I mean, what is the final result you want to see. — Mindastic
– Mindastic, Commented Jul 7, 2015 at 2:54
Sorry about that, gonna edit the question. I want to add a column call description on the table and input the description form segue-api.fisl16.softwarelivre.org/api/talks/560, it's named "full" on the JSON. — Lucas Kunzler
– Lucas Kunzler, Commented Jul 7, 2015 at 2:59
Where are you getting ID 560 from? Is it somewhere from the first API call? I can't find it. — Christian
– Christian, Commented Jul 7, 2015 at 3:00
It's just and example, the first call contains several of those (886, 526, etc) — Lucas Kunzler
– Lucas Kunzler, Commented Jul 7, 2015 at 3:02

stdob-- · Accepted Answer · 2015-07-07 03:12:02Z

1

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/ ):

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>");
    });
});
});

edited Jul 7, 2015 at 3:12

answered Jul 7, 2015 at 3:04

stdob--

29.2k6 gold badges62 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mindastic · Accepted Answer · 2015-07-07 03:16:28Z

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>");
      })
    })
});

Collectives™ on Stack Overflow

Using API result to create another request and display them together

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related