Question

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

我觉得很愚蠢，我一直在解决这个问题3天，无论是否在Google日历中预约，脚本都说房间可用。任何人都可以提出为什么会发生这种情况的建议。我不是程序员，我敢打赌，这很简单，但我似乎无法看到它。任何帮助将不胜感激！

jsFiddle及以下的最小工作示例：

<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>

Answer 1

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

console.log(variableName);

这将在浏览器控制台标签中输出变量的结果（在开发者工具中）。

在你的情况下，我做了console.log(events);事件将被循环，我发现events没有被设置。经过一些调试后，我确定代码是$.getJSON()函数在下面的代码运行之前没有完成100％（很可能是因为ajax请求需要时间）。

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

您的代码现在看起来像这样：

使用JSFiddle：http://jsfiddle.net/Mf8vb/4/

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

$(document).ready(function () {

    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';

    $.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);
        }      

    });   

});

Answer 2

一些观察......

1）为您的代码执行一些refactor并始终执行一些debugging！

2）您的events变量不是预期的object，因为ajax来电是异步和其他代码在进入将填充callback的{{1}}之前执行。换句话说，您需要等待object来电，否则您的ajax将不会是预期的（最初可能是object，过了一会儿，{ {1}}调用结束，undefined包含数据。

只是要知道，您可以强制ajax来电同步，但不是一种好方法。

试试这个：

我喜欢这样工作，编码方式更好：

现场演示： http://jsfiddle.net/oscarj24/8HVj7/

<强> HTML：

object

<强> jQuery的：

ajax

JavaScript中的会议室可用性

2 个答案:

一些观察......

试试这个：