JavaScript中的会议室可用性_Javascript_Jquery_Google Calendar Api

JavaScript中的会议室可用性

javascript jquery google-calendar-api

JavaScript中的会议室可用性,javascript,jquery,google-calendar-api,Javascript,Jquery,Google Calendar Api,我正在尝试为我所在大学的会议室创建一个房间可用性脚本。我决定使用jQuery解析一个公共Google日历的JSON提要，然后在屏幕上显示房间是否可用，从而实现这一点我觉得自己很愚蠢，我已经和这个问题斗争了3天，不管谷歌日历上是否有约会，脚本上说房间是空的。有谁能提出一个建议，为什么会发生这种情况。我不是一个程序员，我打赌这是非常简单的事情，但我只是看不到它。任何帮助都将不胜感激下面是一个简单的工作示例： <html> <head> <title>Gradu

我正在尝试为我所在大学的会议室创建一个房间可用性脚本。我决定使用jQuery解析一个公共Google日历的JSON提要，然后在屏幕上显示房间是否可用，从而实现这一点

我觉得自己很愚蠢，我已经和这个问题斗争了3天，不管谷歌日历上是否有约会，脚本上说房间是空的。有谁能提出一个建议，为什么会发生这种情况。我不是一个程序员，我打赌这是非常简单的事情，但我只是看不到它。任何帮助都将不胜感激

下面是一个简单的工作示例：

<html>
<head>
<title>Graduate Center Conference Room</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>
// Declare global variables

var events = [];
var currentReservation = null;
var nextReservation = null;
var gclaData = 'http://www.google.com/calendar/feeds/4occ2bc4m626a3pgmirlm06q5s%40group.calendar.google.com/public/full?orderby=starttime&sortorder=ascending&futureevents=true&singleevents=true&max-results=2&alt=json';

// Parse Google Calendar Public JSON Feed and store in the events global array

$(document).ready(function () {
$.getJSON(gclaData, function (data) {
    $.each(data.feed.entry, function (i, entry) {
        var dtStart = new Date(entry["gd$when"][0].startTime);
        var dtEnd = new Date(entry["gd$when"][0].endTime);
        var dtSummary = entry.content.$t;
        var dtTitle = entry.title.$t;

        events[i] = {
            'start': dtStart,
                'end': dtEnd,
                'title': dtTitle,
                'summary': dtSummary
        };
    });
});

reservationInfo = '';

// sort events just in case (JSON should be sorted anyways)    

events.sort(function (a, b) {
    return a.start - b.start;
});

// current date

var dtNow = new Date();

// let's assume there are no current room reservations unless script detects otherwise.
// No reservations indicated by -1
currentReservation = -1;

// loop through the events array and if current time falls between start and end of a element in the array the mark it as a reservation currently in progress 

for (var i in events) {
    if (dtNow >= events[i].start && dtNow <= events[i].end) currentReservation = i;
}

// Print the result to a output div

if (-1 == currentReservation) {

    reservationInfo = '<h1>ROOM AVAILABLE</h1>';
    $('#output').html(reservationInfo);

} else {

    reservationInfo = '<h1>ROOM OCCUPIED</h1>';
    $('#output').html(reservationInfo);
}
});
</script>
</head>
<body>
            <div id="output"></div>
</body>
</html>

您可以使用以下命令快速检查变量的状态：

console.log(variableName);

这将在开发者工具的浏览器控制台选项卡中输出变量的结果

在你的情况下，我做了console.logevents；我发现事件没有被设置。经过一些调试，我确定代码是$。getJSON函数在下面的代码运行之前没有100%完成，很可能是因为ajax请求需要时间

为了解决这个问题，我在$.getJSON函数中移动了所有解析事件的代码，以便在解析数据之前正确地检索和设置事件

现在，您的代码将如下所示：

工作区：

您可以使用以下命令快速检查变量的状态：

console.log(variableName);

这将在开发者工具的浏览器控制台选项卡中输出变量的结果

为了解决这个问题，我在$.getJSON函数中移动了所有解析事件的代码，以便在解析数据之前正确地检索和设置事件

现在，您的代码将如下所示：

工作区：

一些观察结果。。。我会对你的代码进行重构，并经常进行调试

2您的events变量不是预期的对象，因为ajax调用是异步的，其他代码在进入将填充对象的回调之前执行。换句话说，您需要等待ajax调用，否则您的对象将不是预期的对象，可能一开始是未定义的对象，过了一会儿，当ajax调用完成时，一个包含数据的对象

要知道，可以强制ajax调用同步，但这不是一个好方法

试试这个：我喜欢这样工作，这样组织起来更好：

现场演示：

HTML:

jQuery：