Some observations...
1) Do some refactor
to your code and always do some debugging
!
2) Your events
variable is not the expected object
since ajax
calls are asynchronous and other code gets executed before getting into the callback
that will fill your object
. In other words, you need to wait for ajax
call otherwise your object
won't be the expected one (maybe will be undefined
at first and after a moment, when ajax
call finishes, an object
with data).
Just to know, you can force an ajax
call to be synchronous but that's NOT a good approach.
Try this:
I like to work this way, code it's way better organized:
Live Demo: http://jsfiddle.net/oscarj24/8HVj7/
HTML:
<div id="output"></div>
jQuery:
/*
* http://stackoverflow.com/questions/23205399/conference-room-availability-in-javascript
* @author: Oscar Jara
*/
/* Google calendar URL */
var url = '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';
/* Status list used to show final message to UI */
var statusList = {
'ROOM_A': 'Available',
'ROOM_O': 'Occupied',
'ERROR_DATA': 'No data found at Google calendar.',
'ERROR_PROCESS': 'There was an error checking room availability.'
};
/* Document onReady handler */
$(document).ready(function () {
getCalData(url);
});
/*
* Get Google calendar data by request.
* @param {String} url
*/
function getCalData(url) {
var statusCode;
$.getJSON(url, function (data) {
if (!$.isEmptyObject(data)) {
var events = parseCalData(data);
var curReserv = getCurrentReservation(events);
statusCode = getRoomStatusCode(curReserv);
} else {
statusCode = 'ERROR_DATA';
}
printRoomStatusToUI(statusCode, $('#output'));
}).fail(function (r) { // HTTP communication error
console.error(r);
});
};
/*
* Parse Google calendar data.
* @param {Object} data
* @return {Object} events
*/
function parseCalData(data) {
var events;
events = $.map(data.feed.entry, function (evt, i) {
var dt = evt['gd$when'][0];
return {
start: new Date(dt.startTime),
end: new Date(dt.endTime),
title: evt.title.$t,
summary: evt.content.$t
};
});
if (events) {
sortEvents(events); // Just in case
}
return events;
};
/*
* Sort Google calendar events.
* @param {Object} events
*/
function sortEvents(events) {
events.sort(function (a, b) {
return a.start - b.start;
});
}
/*
* Get/check for current reservation.
* If current time falls between start and end of an event,
* mark it as a reservation currently in progress.
* @param {Object} events
* @return {int} curReserv
*/
function getCurrentReservation(events) {
var curReserv;
if (events) {
var dtNow = new Date(); // Current datetime
curReserv = -1; // No reservations
for (var i in events) {
var dtStart = events[i].start;
var dtEnd = events[i].end;
if (dtNow >= dtStart && dtNow <= dtEnd) {
curReserv = i;
break;
}
}
}
return curReserv;
};
/*
* Get room availability statusCode.
* @param {int} curReserv
* @return {String} statusCode
*/
function getRoomStatusCode(curReserv) {
var statusCode = 'ROOM_A';
if (!curReserv) {
statusCode = 'ERROR_PROCESS';
} else if (curReserv && curReserv != -1) {
statusCode = 'ROOM_O';
}
return statusCode;
};
/*
* @private
* Get room status text.
* @param {String} statusCode
* @return {String}
*/
function getRoomStatusText(statusCode) {
return statusList[statusCode];
};
/*
* @private
* Check if statusCode is an ERROR one.
* @param {String} statusCode
* @return {Boolean}
*/
function isErrorStatus(statusCode) {
return (statusCode.indexOf('ERROR') > -1);
};
/*
* Print room availability to UI.
* @param {String} statusCode
* @param {Object} elem
*/
function printRoomStatusToUI(statusCode, elem) {
var statusText = getRoomStatusText(statusCode);
var isError = isErrorStatus(statusCode);
if (statusText && $.trim(statusText) != '') {
if (!isError) {
statusText = '<h1>Room is: ' + statusText + '</h1>';
}
elem.html(statusText);
}
};