Javascript 比较和打印引导面板内的元件

我正在做一个项目，从一个API中收集数据，为学校的时间表做准备。这就是我编写的代码，以获得我需要的所有必要数据

var timetable = [];
var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 
'Friday', 'Saturday'];



// Go through the data and pick specific information
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];

            // Get student group
            if (resource.type === "student_group") {
                if (timetable.indexOf("name")) {
                    var studentGroup = timetable.push(resource.name.bold() + "<br/>");
                }
            }

            // Get scheduling group
            if (resource.type === "scheduling_group") {
                if (timetable.indexOf("name")) {
                    var schedulingGroup = timetable.push(resource.name + "<br/>")
                }
            }


           // Get rooms
           if (resource.type === "room") {
               if (timetable.indexOf("code")) {
                   var room = timetable.push(resource.code.bold() + "<br/>" + "<br/>");
               }                                     
           }
       }                              
   }

   // Get subject
   if (reservation != null) {
       if (timetable.indexOf("subject")) {
           var subject = timetable.push("<br/>" + reservation.subject.bold() + "<br/>");
       }
   }

   // Day name (Mon, Tue, Wed...)
   var day = new Date(reservation.startDate);                          
   var date = timetable.push(days[day.getDay()].bold() + "<br/>");

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

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

  // Print
  document.getElementById("demo").innerHTML = timetable.join("");

但我不希望这些信息只是在数组中。我在考虑打印周一、周二等每天的数据。。。进入他们自己的专栏

在这里，我想使用折叠引导面板，每个面板都有各自的日期名称，例如星期一、星期二

是否有任何快速有效的解决方案将我收集的数据中的日期名称与时间表数组中的日期名称链接到具有相同日期名称的面板

---

…或者您有其他智能解决方案吗？

为此，我将使用Handlebar.js之类的模板引擎

最近，我完成了一个项目，该项目广泛使用了带bootstrap3的车把，我发现它非常容易适应该项目的使用

在这个面板中教你把手太费劲了，但是它允许你用{{tokens}}定义一个HTML模板，在那里你的数据将要去，并且它有一些有用的特性，比如在一个提供的数据集上迭代以构造尽可能多的面板来显示集合中的所有数据

语法在标记中的结果如下所示：

{{#each event}}
  <div class="panel">
    <h3>{{event.dayOfWeek}}</h3>
    <p>
      <label>{{event.date}}</label>
      <label>{{event.startTime}} - {{event.endTime}}</label>
    </p>
  </div>
{{/each}}

超级容易使用。查一查。很棒的工具

{{#each event}}
  <div class="panel">
    <h3>{{event.dayOfWeek}}</h3>
    <p>
      <label>{{event.date}}</label>
      <label>{{event.startTime}} - {{event.endTime}}</label>
    </p>
  </div>
{{/each}}