比較和打印引導面板中的元素

Question

我正在從一個項目中收集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(""); 

下面是從打印數據到timetable陣列的輸出;

A440.2 

KL25AB10403-3001 

Monday 
2017/01/16 
10:00 - 13:00 

_______________________________ 


A440.4 

KL04DVTT04-3002 

Monday 
2017/01/16 
13:15 - 16:00 

_______________________________ 


A320.2 

KC00AKO10-3007 

Tuesday 
2017/01/17 
09:00 - 11:45 

_______________________________ 


A420.4  

KC00AMT1010-3010 

Tuesday 
2017/01/17 
12:15 - 14:00 

_______________________________ 


A420.4 

KC00AMT1010-3010 

Wednesday 
2017/01/18 
08:00 - 10:45 

_______________________________ 


A350.3 

KL04BTTIVE1-3001 

Wednesday 
2017/01/18 
11:00 - 13:00 

_______________________________ 


A440.4 

KL04DVTT04-3002 

Wednesday 
2017/01/18 
13:15 - 15:00 

_______________________________ 


A440.2 

KL25AB10403-3001 

Thursday 
2017/01/19 
08:00 - 09:45 

_______________________________ 


A320.2 

KC00AKO10-3007 

Thursday 
2017/01/19 
10:00 - 11:45 

但我不想這個信息只是在一個數組內。我正在考慮將每天（星期一，星期二等）的數據打印到他們自己的專欄中。

在這裏，我正在考慮使用摺疊引導面板，每個面板都有自己的日期名稱，例如。星期一，星期二...

是否有任何快速有效的解決方案將我收集的數據（從timetable陣列中可以看到）的日期名稱鏈接到具有相同日期名稱的面板？

...或者，您是否有任何其他智能解決方案的想法？

Answer 1

爲了這個，我會用一個模板引擎就像Handlebars.js

最近，我完成了一個項目，廣泛利用手把的自舉3，我發現它是非常容易的在該項目中使用適應

在這個面板中教你把手太費勁了，但它可以讓你定義一個HTML模板，其中的數據將放在{{tokens}}處，並且它有很多有用的功能，比如迭代所提供的數據集根據需要構建儘可能多的面板以顯示集合中的所有數據

語法結束查看這樣在你的標記：

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

超級簡單易用。看看它。偉大的工具。