JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<table border="1">
<tr><th>Room Name</th><th>Booked by</th></tr>

</table>

JavaScript

// Using LibCal and JSONP
$.ajax({
    url: "https://api2.libcal.com/1.0/room_bookings_nickname/?iid=3356&group_id=12306&key=92a47e5c854dee620cca071648c3fc41",

    // The name of the callback parameter, as specified by the YQL service
    jsonp: "callback",

    // Tell jQuery we're expecting JSONP
    dataType: "jsonp",

    // Work with the response
    success: function( response ) {
    		console.log(response);
        var data = response.bookings.timeslots;
        var room  = {};
        var roomInfo = {};
        
        $.each(data, function(index,element){
        	if(typeof room[element.room_id] === "undefined"){
          	room[element.room_id] = [];
            roomInfo[element.room_id] = element.room_name;
          }
          room[element.room_id].push(element);
        });
        
                
        console.log(room);
        console.log(roomInfo);
        
        for(var roomId in room){
        	var dest = room[roomId];
          var tr = $('<tr>');
          tr.append($('<td>'+roomInfo[roomId]+'</td>'));
          var td = $('<td>');
          for(var i=0; i<dest.length; i++){
          	var item = dest[i];
            var div = $('<div></div>');
            div.text(item.booking_label+"["+item.booking_start+" : "+item.booking_end+"]");
            td.append(div);
          }
          
          tr.append(td);
          
          $("table").append(tr);
        }

    }
});