从 JSON 对象和元素类名称中收集数组并进行比较

Question

我有一个显示多个房间预订的外部 JSON 提要。问题是它只显示已预订的时隙，而没有显示数据对象中的空时隙/约会。问题是提要不包含尚未预订的空时隙。

所以我想出了一个想法，即创建一个预先格式化的 HTML“模板”页面，其中已经存在一些数据 - 有效地将 JSON 数据覆盖在预订的时间段中，并将空的时间段保留为静态 HTML。

想法是用一个类名来命名<td> 元素，该类名表示房间 id 和 24 小时时间段。然后根据所有<td> 类名构造一个数组。然后过滤我的 JSON 对象预订时间并检索包含房间 ID 和预订开始时间（以及其他必要数据）的数组。

下一步是遍历两个数组，如果两个数组中的房间 id 和预订开始时间都匹配，则将数据打印到该单元格（可以通过其类名访问）。现在，我无法让数组看起来相同。

“简化”的 JSON 文件（只是整个对象的选择）：

var response={
  "bookings": {
    "group_id": 12306,
    "name": "Public Meeting Rooms",
    "url": "http:theurlfeed.from.libcal",
    "timeslots": [{
      "room_id": "36615",
      "room_name": "Meeting Room 2A",
      "booking_label": "Mahjong",
      "booking_start": "2016-01-20T10:00:00+10:00",
      "booking_end": "2016-01-20T11:00:00+10:00"
    }, {
      "room_id": "36615",
      "room_name": "Meeting Room 2A",
      "booking_label": "Mahjong",
      "booking_start": "2016-01-20T11:00:00+10:00",
      "booking_end": "2016-01-20T12:00:00+10:00"
    }, {
      "room_id": "36616",
      "room_name": "Meeting Room 2B",
      "booking_label": "IELTS",
      "booking_start": "2016-01-20T10:00:00+10:00",
      "booking_end": "2016-01-20T11:00:00+10:00"
    }, {
      "room_id": "36616",
      "room_name": "Meeting Room 2B",
      "booking_label": "recording",
      "booking_start": "2016-01-20T12:00:00+10:00",
      "booking_end": "2016-01-20T13:00:00+10:00"
    }, {
      "room_id": "36616",
      "room_name": "Meeting Room 2B",
      "booking_label": "Luke",
      "booking_start": "2016-01-20T18:00:00+10:00",
      "booking_end": "2016-01-20T19:00:00+10:00"
    }],
    "last_updated": "2016-01-20T12:40:36+10:00"
  }
}

这是 HTML（为简化起见，我没有显示完整的结构）：

<table border="1" id="rooms-table">
<thead><tr><th></th>&nbsp;<th>10am</th><th>11am</th><th>12pm</th><th>1pm</th><th>2pm</th><th>3pm</th><th>4pm</th><th>5pm</th><th>6pm</th><th>7pm</th></tr></thead>
<tbody id="main-table-body">
  <tr>
    <td>Meeting Room 2A</td>
    <td class="36615 10:00"></td>
    <td class="36615 11:00"></td>
    <td class="36615 12:00"></td>
  </tr>
  <tr>
    <td>Meeting Room 2B</td>
    <td class="36616 10:00"></td>
    <td class="36616 11:00"></td>
    <td class="36616 12:00"></td>
  </tr>
  <tr>
  </tbody>
  </table>

这是我的 JavaScript（在底部包含我尚未编码的概念的伪代码）：

//Convert timestamp to readable format and remove date
var Timeslots = response.bookings.timeslots;

function getTime(timestamp) {
    var time = new Date(timestamp);
    return [ time.getHours(), time.getMinutes() ].map(function(time){
        return ['', "0"][+(String(time).length < 2)] + String(time);
    }).join(':');
}                  

for(var i in Timeslots) (function(Timeslots){
    Timeslots.booking_start = getTime(Timeslots.booking_start);
    Timeslots.booking_end = getTime(Timeslots.booking_end);
})(Timeslots[i]);

console.log(response);

var roomList = new Array;
var tdClassList;

//function to detect if timeslot is booked or not
//If booked, assigns the booking name and changes bg color of cell
$.each(response.bookings.timeslots, function(index, timeslot) {

    var roomBooking = timeslot.room_id + ' ' + timeslot.booking_start;
    roomList[roomBooking] = roomBooking;

    tdClassList = $('td').map(function () {
        return $(this).attr('class');
    }).get();

    });
    console.log(tdClassList);
    console.log(roomList);
         // This code is incomplete
         // It will need to loop through both arrays and compare values and then write some css and html if match is found across the arrays
        /*if (roomList == tdClassName) {
            $( "td" ).html(timeslot.booking_label)
            $( "td" ).css( "background-color", "red" );
        } else { $( "td" ).html("");
        }*/

这里是一个工作 JS Fiddle 的链接，其中显示了所有正在播放的元素：https://jsfiddle.net/coolwebs/L0ybd0dm/1/

我现在的问题是，从 JSON 对象创建的数组是以键值对的形式出现的。

而不是返回：

["36615 10:00", "36615 11:00", "36615 12:00", "36615 30:00", ...]

它正在返回：

[36615 10:00: "36615 10:00",36615 11:00: "36615 11:00", 36615 12:00: "36615 12:00", 36615 13:00: "36615 30:00", ...]

嗯，我做错了什么？

Answer 1

这远非完美或完整，但确实在一定程度上简化了您的流程。

我认为不需要创建元胞数组。解析传入的数据后，您可以遍历单元格并立即进行匹配。

我使用了一个简单的对象来比较房间/起点。

// example
var timeClasses ={"3456 02:00":true, "56854 11:00": true}

然后，当您遍历表格时，只需检查与您的单元格类匹配的属性是否存在

success: function(response) {  


    var data = response.bookings.timeslots;

    var timeClasses = {};

    var Timeslots = data.map(function(item) {
      // parse the dates
      item.booking_start = getTime(item.booking_start);
      item.booking_end = getTime(item.booking_end);
      // update hashmap
      timeClasses[item.room_id + ' ' + item.booking_start] = true;
      return item;
    });


    $('tbody tr').each(function() {
      $(this).find('td:gt(0)').each(function() {
        var className = $(this).attr('class');
        if (timeClasses[className]) {
          $(this).css('background', 'red')
        }
      });
    });

  }

这实际上只是为了给您一个起点。 我不太喜欢课程方法……尤其是其中的空间。

您还需要重新审视如何可视化预订涵盖的完整时间段，并且需要更多逻辑来申请每个预订中间的单元格

DEMO