Question

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

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

想法是使用类名来命名<td>元素，该类名称表示24小时内的房间ID和时间段。然后根据所有<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小提琴的链接，显示所有元素：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

从JSON对象和元素类名称收集数组并比较它们

1 个答案: