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

Question

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

所以我想到了一个想法，即拥有一个预格式化的 HTML"template"页面，其中包含一些已经存在的数据 - 有效地覆盖预订时间段中的 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