display all events of single date in single row of html table in <td></td> using javascript/JSOM

Question

am trying to fetch all single day event from SharePoint calendar list and want to display all these single date's events into the single row of html table inside based on appropriate condition i tried something as bellow

var ctx = new SP.ClientContext(appWebUrl);//Get the SharePoint Context object based upon the URL 
var myList = ctx.get_web().get_lists().getByTitle("MyList"); 
function retrieveBookingDetails(Date) { 
var query = new SP.CamlQuery(); 
query.set_viewXml('<View><Where><eq><FieldRef Name=\'EventDate\'/><Value Type=\'DateTime\'IncludeTimeValue=\'FALSE\' >' + Date + '</Value></eq>" + "</Where></View>'); 
var items = myList.getItems(query); 
ctx.load(items); 
//ctx.load(myList); 
ctx.executeQueryAsync(onQuerySucceeded, onQueryFailed); 
function onQuerySucceeded() { 
retrieveItems(items); 
} 
function onQueryFailed(sender, args) { 
alert('Request failed. ' + args.get_message() + 
'\n' + args.get_stackTrace()); 
} 
} 
function retrieveItems(items) { 
var enumerator = items.getEnumerator(); 
var innerHtml = "<table border=1 class='display nowrap dataTable dtr-inline'><thead><tr><th> Class Name</th><th>8:00-9:00</th><th>9:00-10:00</th><th>10:00-11:00</th><th>11:00-12:00</th><th>12:00-13:00</th></tr></thead> "; 
var count = 0; 
var count = items.get_count(); 
var rowcount = myList.get_itemCount(); 
var rows = 0; 
var strttandend; 
innerHtml += "<tbody>" 
//do label:{ 
while (enumerator.moveNext()) { 
var currentListItem = enumerator.get_current(); 
innerHtml += "<tr><td class=classname id=" + currentListItem.get_item('ID') + ">" + currentListItem.get_item('RName') + "</td>"; 
for (var c = 1; c <= 5; c++) { 
var startdte = currentListItem.get_item('EventDate').toString().split(" "); 
var startdte_time = startdte[4].toString().split(":"); 
var enddte = currentListItem.get_item('EndDate').toString().split(" "); 
var enddte_time = enddte[4].toString().split(":"); 
strttandend = startdte_time[0] + ":" + startdte_time[1] + "-" + enddte_time[0] + ":" + enddte_time[1]; 
switch (c) { 
case 1: if (strttandend === "08:00-09:00") { 
innerHtml += "<td class='alertShow held'></td>" 
break; 
} 
else { 
innerHtml += "<td class='alertShow'></td>" 
} 
break; 
case 2: if (strttandend === "09:00-10:00") { 
innerHtml += "<td class='alertShow held 
} 
else { 
innerHtml += "<td class='alertShow'></td>" 
} 
break; 
case 3: if (strttandend === "10:00-11:00") { 
innerHtml += "<td class='alertShow held'></td>" 
} 
else { 
innerHtml += "<td class='alertShow '></td>" 
} 
break; 
case 4: if (strttandend === "11:00-12:00") { 
innerHtml += "<td class='alertShow held'></td>" 
} 
else { 
innerHtml += "<td class='alertShow'></td>" 
} 
break; 
case 5: if (strttandend === "12:00-13:00") { 
innerHtml += "<td class='alertShow held'></td>" 
} 
else { 
innerHtml += "<td class='alertShow'></td>" 
} 
break; 
} 

} 
innerHtml += "</tbody>"; 
} 
//}while(!count) 
$("#Data1").html(innerHtml); 
}

Output of above code(current and expected) are as per bellow snippet

Answer 1

Just guessing by looking at the code, but you are adding empty table cells in your switch-case statement. You probably mean to insert text or pictures or something inside the <td></td> tags.

Edit after problem described: The problem is with the loops at the end. What you want to be doing is looping only over the listItems returned from SharePoint. Don't dynamically create a different number of table cells. Here is the pseudocode:

Create all 5 table cells (or just the CSSclass for each of them) in separate variables with no highlight as the default
loop through listitems
  If listItem matches a timeslot, set that td CSSclass to be highlighted.
endloop
add all 5 table cells to your innerhtml.

Edit 2: Here is some code to get you started. Caution - I haven't tried to run this code, I just typed it out off the top of my head ... it will require debugging on your part.

function retrieveItems(items) { 
  var orderedRooms = ["room1","room2","room3"];
  var orderedTimes = ["08:00-09:00","09:00-10:00","10:00-11:00","11:00-12:00","12:00-13:00"];
  //The roomsByTimes array each row represents a different room (room1, room2, room3, etc.) each column represents a different time (0800-0900, 0900-1000, 1000-1100, etc.)
  //If the value is zero, there is no appointment in that room at that time, if the value one there is an appointment in that room at that time.
  var roomsByTimes = [[0,0,0,0,0],
                      [0,0,0,0,0],
                      [0,0,0,0,0]];


  var enumerator = items.getEnumerator(); 

  while (enumerator.moveNext()) {
    var currentListItem = enumerator.get_current();

    //Get the time
    var startdte = currentListItem.get_item('EventDate').toString().split(" ");
    var startdte_time = startdte[4].toString().split(":");
    var enddte = currentListItem.get_item('EndDate').toString().split(" ");
    var enddte_time = enddte[4].toString().split(":");
    var strttandend = startdte_time[0] + ":" + startdte_time[1] + "-" + enddte_time[0] + ":" + enddte_time[1];

    //get the room
    var rmname = currentListItem.get_item('RName');

    // set the roomsByTimes number to 1 for the correct room and time.
    var row = orderedRooms.indexOf(rmName);
    var column = orderedTimes.indexOf(strttandend);
    roomsByTimes[row][column] = 1;
  }
  //We now know every room and time whether it is held or not.

  //Set up the beginning of the table HTML including header row
  var innerHtml = "<table border=1 class='display nowrap dataTable dtr-inline'><thead><tr><th> Class Name</th><th>8:00-9:00</th><th>9:00-10:00</th><th>10:00-11:00</th><th>11:00-12:00</th><th>12:00-13:00</th></tr></thead> "; 
  innerHtml += "<tbody>" 

  //Iterate through the roomsByTimes array and generate our HTML from that.
  for(var i=0; i<roomsByTimes.length; i++){
    var resultRow = roomsByTimes[i];
    innerHtml += "<tr><td class='classname'>" + orderedRooms[i] + "</td>";
    for(var j=0; j<resultRow.length; j++) {
      var cssClass = "alertShow";
      if (roomsByTimes[i][j] == 0)
        cssClass = "alertShow held";
      innerHtml += "<td class='" + cssClass + "'></td>";
    }
    innerHtml += "</tr>";
  }

  //Set up the end of the HTML table
  innerHtml += "</tbody></table>";
}