javascript - How to apply custom JSON data over a preformatted HTML page -

i have json feed displays room bookings multiple rooms. problem shows timeslots booked , not show empty slots/appointments in data object. first attempt @ this question printing selection of json array data out page using jquery , not show empty timeslots.

ok came idea have preformatted html 'template' page data present - overlay json data in booked timeslots , leave empty timeslots static html.

the 'simplified' json file (just selection of whole object):

var response={   "bookings": {     "group_id": 12306,     "name": "public meeting rooms",     "url": "http:theurlfeed.from.libcal",     "timeslots": [{       "room_id": "36615",       "room_name": "meeting room 2a",       "booking_label": "mahjong",       "booking_start": "2016-01-20t10:00:00+10:00",       "booking_end": "2016-01-20t11:00:00+10:00"     }, {       "room_id": "36615",       "room_name": "meeting room 2a",       "booking_label": "mahjong",       "booking_start": "2016-01-20t11:00:00+10:00",       "booking_end": "2016-01-20t12:00:00+10:00"     }, {       "room_id": "36616",       "room_name": "meeting room 2b",       "booking_label": "ielts",       "booking_start": "2016-01-20t10:00:00+10:00",       "booking_end": "2016-01-20t11:00:00+10:00"     }, {       "room_id": "36616",       "room_name": "meeting room 2b",       "booking_label": "recording",       "booking_start": "2016-01-20t12:00:00+10:00",       "booking_end": "2016-01-20t13:00:00+10:00"     }, {       "room_id": "36616",       "room_name": "meeting room 2b",       "booking_label": "luke",       "booking_start": "2016-01-20t18:00:00+10:00",       "booking_end": "2016-01-20t19:00:00+10:00"     }],     "last_updated": "2016-01-20t12:40:36+10:00"   } } 

here html (for sake of simplification haven't shown complete structure):

<table border="1" id="rooms-table"> <thead><tr><th></th>&nbsp;<th>10am</th><th>11am</th><th>12pm</th><th>1pm</th><th>2pm</th><th>3pm</th><th>4pm</th><th>5pm</th><th>6pm</th><th>7pm</th></tr></thead> <tbody id="main-table-body">   <tr>     <td>meeting room 2a</td>     <td class="36615 10:00"></td>     <td class="36615 11:00"></td>     <td class="36615 12:00"></td>   </tr>   <tr>     <td>meeting room 2b</td>     <td class="36616 10:00"></td>     <td class="36616 11:00"></td>     <td class="36616 12:00"></td>   </tr>   <tr>   </tbody>   </table> 

and javascript (contains pseudo code concepts cannot yet code):

    //convert timestamp readable format , remove date     var timeslots = response.bookings.timeslots;      function gettime(timestamp) {         var time = new date(timestamp);         return [ time.gethours(), time.getminutes() ].map(function(time){             return ['', "0"][+(string(time).length < 2)] + string(time);         }).join(':');     }                        for(var in timeslots) (function(timeslots){         timeslots.booking_start = gettime(timeslots.booking_start);         timeslots.booking_end = gettime(timeslots.booking_end);     })(timeslots[i]);      console.log(response);      var roomlist = new array;     var tdclasslist;      //function detect if timeslot booked or not     //if booked, assigns booking name , changes bg color of cell     $.each(response.bookings.timeslots, function(index, timeslot) {          var roombooking = timeslot.room_id + ' ' + timeslot.booking_start;         roomlist[roombooking] = roombooking;          tdclasslist = $('td').map(function () {             return $(this).attr('class');         }).get();      });     console.log(tdclasslist);     console.log(roomlist);          // code incomplete          // need loop through both arrays , compare values , write css , html if match found across arrays         /*if (roomlist == tdclassname) {             $( "td" ).html(timeslot.booking_label)             $( "td" ).css( "background-color", "red" );         } else { $( "td" ).html("");         }*/ 

}

my js code needs quite bit of work, brain struggling it. can please ask 'best practice' suggestions?