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这样的模板引擎

最近我完成了一个大量使用Handstars和Bootstrap 3的项目，我发现它非常容易适应该项目

在这个面板中教你把手是太费劲了，但它允许你定义一个带有{{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}}

超级好用。仔细看看。伟大的工具。

比较和打印引导板内部的元素

1 个答案: