Currently, I am involved in a project that entails extracting data from an API related to a school's timetable. The code snippet below outlines the process I have implemented to gather all essential information:
var timetable = [];
var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
// Iterate through the data and extract specific details
for (var i = 0; i < json.reservations.length; i++) {
if (json.reservations[i].resources != null) {
for (var j = 0; j < json.reservations[i].resources.length; j++) {
var reservation = json.reservations[i];
var resource = json.reservations[i].resources[j];
// Extract student group information
if (resource.type === "student_group") {
if (timetable.indexOf("name")) {
var studentGroup = timetable.push(resource.name.bold() + "<br/>");
}
}
// Extract scheduling group information
if (resource.type === "scheduling_group") {
if (timetable.indexOf("name")) {
var schedulingGroup = timetable.push(resource.name + "<br/>")
}
}
// Extract room details
if (resource.type === "room") {
if (timetable.indexOf("code")) {
var room = timetable.push(resource.code.bold() + "<br/>" + "<br/>");
}
}
}
}
// Extract subject information
if (reservation != null) {
if (timetable.indexOf("subject")) {
var subject = timetable.push("<br/>" + reservation.subject.bold() + "<br/>");
}
}
// Retrieve day name (Mon, Tue, Wed...)
var day = new Date(reservation.startDate);
var date = timetable.push(days[day.getDay()].bold() + "<br/>");
// Obtain starting timestamp
if (reservation != null) {
var start = reservation.startDate;
var startStr = start.split("-").join('/').slice(0, 10) + "<br/>" + start.slice(11, 16);
lukkari.push(startStr + " - ");
}
// Determine ending timestamp
if (reservation != null) {
var end = reservation.endDate;
var endStr = end.slice(11, 16);
timetable.push(endStr + "<br/> <br/>");
}
var line = timetable.push("_______________________________<br/>");
// Output the results
document.getElementById("demo").innerHTML = timetable.join("");
The output displayed includes various details such as room codes, timings, and subjects allocated on certain days of the week.
However, instead of merely storing this data within an array, I aim to organize it into separate columns based on each day of the week (Monday, Tuesday, etc.). One potential approach would involve utilizing collapsible Bootstrap panels, where each panel corresponds to a specific day (e.g., Monday, Tuesday).
Could you suggest an efficient method to associate the extracted day names from the collected data (as seen in the timetable array) with the respective panels displaying those particular days?
If not, are there any alternative strategies or creative solutions that could be considered for this task?