Develop Reference

How to fix " Uncaught Reference Error: autobahn is not defined at HelloworldProxy.connect " error?

I am trying to implement franca IDL using js and autobahn on clientside and wamp c++ server.I am completely newbee to this .js this is the first time I am working on this but I have worked on franca with D-bus so I have idea on franca. Any help and suggestions will help ma a lot.
In clientside i wrote a simple helloworld code
package example.hello
interface HelloWorld {
version {major 1 minor 0}
method sayHello {
in {
String name
}
out {
String message
}
}
}
and generated the autobahn js binding code. Now am taking up the code as below but its showing the below error:
" Uncaught ReferenceError: autobahn is not defined at HelloworldProxy.connect "
hello.html code:
<form>
<br/><br/><br/>
<label>Result: <output id="message" /></label><br/>
<br/><hr/><br/><br/>
<label>Status: <output id="connectionStatus"></output></label>
</form>
<p>This example uses WAMP communication to interact with a C++
server using CommonAPI.</p>
<br/><br/><br/><hr/>
<form>
<br/><br/><br/>
<label>Result: <output id="message" /></label><br/>
<br/><hr/><br/><br/>
<label>Status: <output id="connectionStatus"></output></label>
</form>
<script src="js/HelloworldProxy.js"></script>
<!--script src="js/HelloworldClientBlueprint.js"></script>-->
<script type="text/javascript">
console.log("I am alive!");
var proxy = new HelloworldProxy();
proxy.connect('ws://localhost:8081');
//var clientId = 66;
//var addr =
'local:example.hello.helloworld:v0_1:example.hello.helloworld';
proxy.onOpened = function() {
// your code goes here
connection.onopen = function(session, details) {
console.log("Connected", details);
setStatus("Connected to network.");
};
/**
* Async callback in response to a 'sayHello' call.
*
* #param cid the call id
* #param message
*/
proxy.replySayHello = function(cid, message) {
// your code goes here
};
/**
* API function provided by the proxy for calling method 'sayHello'.
* #param name
*/
proxy.sayHello(name);
};
proxy.onClosed = function(event) {
// your code goes here
connection.onclose = function(reason, details) {
console.log("Connection closed", reason, details);
setStatus("Disconnected.");
}
};
setStatus("Connecting to server...");
connection.open();
function setStatus(text) {
document.getElementById("connectionStatus").value = text;
}
</script>
</body>
</html>
generated autobahn binding code:
function HelloworldProxy() {
this.connection = null;
this.session = null;
this.address =
"local:example.hello.helloworld:v0_1:example.hello.helloworld"
this.callID = 0;
}
HelloworldProxy.prototype.getNextCallID = function() {
this.callID = this.callID + 1;
return this.callID;
};
// call this method to invoke sayHello on the server side
HelloworldProxy.prototype.sayHello = function(name) {
var cid = this.getNextCallID();
var _this = this;
this.session.call(this.address + '.sayHello', [cid, name]).then(
function (res) {
if (typeof(_this.replySayHello) === "function") {
_this.replySayHello(cid, res);
}
},
function (err) {
console.log("Call failed, error message: ", err);
_this.replyError();
}
);
return cid;
};
HelloworldProxy.prototype.connect = function(address) {
var _this = this;
_this.connection = new autobahn.Connection({
url: address,
realm: 'realm1'}
);
_this.connection.onopen = function(session, details) {
console.log("Connected", details);
if (typeof(_this.onOpened) === "function") {
_this.onOpened();
}
_this.session = session;
// subscribing to all broadcasts
}
_this.connection.onclose = function(reason, details) {
console.log("Connection closed", reason, details);
if (typeof(_this.onClosed) === "function") {
_this.onClosed(reason);
}
}
setStatus("Connecting to server...");
_this.connection.open();
};
I need to connect the client with the server and get a response message from the server. The server is working good I have tested it with the help of RESTClint.sh.

hi it worked I just added the display functions in js and thus got output.
similar to below code:
document.getElementById("i1").onclick = function(){
console.log("sending " + Indicator.R_ind);
proxy.Myindicator(Indicator.name);
proxy.replySayHello = function(cid, message) {
document.getElementById("message").value = message;
document.getElementById("d1").innerHTML = message;
};

I worked around and got the solution for above question. I was actually missing autobahn.min.js file (header file) from the autobahn. the connection has been achieved.It took half a day to reach this stage but it was a good experience.
Now the issue is I am not getting how to call the method sayhello in javascript to get the respose from the server.
i.e. : in javascript part I have
/**
* Async callback in response to a 'sayHello' call.
*
* #param cid the call id
* #param message
*/
proxy.replySayHello = function(cid, message) {
// your code goes here
};
/**
* API function provided by the proxy for calling method 'sayHello'.
* #param name
*/
proxy.sayHello(name);
I am not getting how to call these functions any suggestions will help me a lot. Thanks in advance.

combining knockout js with truffle app.js

I am learning on how to create a voting app with truffle and rendering on the screen everything goes well. So now I don't want to use vanilla js but want to add a framework to it, called knockout.js
I tried it in everyway but for some reason the knockout js is not working inside the app.js file given by truffle framework.
Here is the piece of code that works but it looks like the observables don't really work at all.
function AppViewModel() { // Loading the appviewmodel
var self = this;
App = {
web3Provider: null,
contracts: {},
account: '0x0',
init: function() {
return App.initWeb3();
},
initWeb3: function() {
// TODO: refactor conditional
if (typeof web3 !== 'undefined') {
// If a web3 instance is already provided by Meta Mask.
App.web3Provider = web3.currentProvider;
web3 = new Web3(web3.currentProvider);
} else {
// Specify default instance if no web3 instance provided
App.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');
web3 = new Web3(App.web3Provider);
}
return App.initContract();
},
initContract: function() {
$.getJSON("Election.json", function(election) {
// Instantiate a new truffle contract from the artifact
App.contracts.Election = TruffleContract(election);
// Connect provider to interact with contract
App.contracts.Election.setProvider(App.web3Provider);
return App.render();
});
},
render: function() {
var electionInstance;
var loader = $("#loader");
var content = $("#content");
var name = ko.observable('masnad'); //added the observable!
loader.show();
content.hide();
// Load account data
web3.eth.getCoinbase(function(err, account) {
if (err === null) {
App.account = account;
$("#accountAddress").html("Your Account: " + account);
}
});
// Load contract data
App.contracts.Election.deployed().then(function(instance) {
electionInstance = instance;
return electionInstance.candidatesCount();
}).then(function(candidatesCount) {
var candidatesResults = $("#candidatesResults");
candidatesResults.empty();
for (var i = 1; i <= candidatesCount; i++) {
electionInstance.candidates(i).then(function(candidate) {
console.log(candidate);
var id = candidate[0];
var name = candidate[1];
var voteCount = candidate[2];
// Render candidate Result
var candidateTemplate = "<tr><th>" + id + "</th><td>" + name + "</td><td>" + voteCount + "</td></tr>"
candidatesResults.append(candidateTemplate);
});
}
loader.hide();
content.show();
}).catch(function(error) {
console.warn(error);
});
}
};
}
$(document).ready(function () {
ko.applyBindings(new AppViewModel(), document.getElementById('vote_app'));
App.init();
});
I have attached comments on the above code where the knockout js observables are used but unfortunetly in the HTML file they don't exist.
Here is the piece of code on the HTML file that should work..
<h1 class="text-center"><span data-bind="text:name"></span></h1>

Knockout is not able to find the observable because you initialized it as a local variable, i.e., as var name = ...
Instead, you need to make it a property of the viewModel instance using the this operator, because that's how you expose it to the HTML.
Try replacing that line with
self.name = ko.observable('masnad');

Convert IIFE module to something importable by RollupJS

I am using RollupJS as a bundler, and it can read CommonJS (via a plugin) or ES6 modules. But this module seems to be in UMD format, and I am looking for a quick way I can edit it (without replacing a lot of lines) so that it is in commonJS or ES6 format.
What do folks suggest? I show the top and the bottom of a 5,000 line .js file.
#module vrlinkjs
**/
(function (mak) {
mak.MessageKindEnum = {
Any : -1,
Other : 0,
AttributeUpdate : 1,
Interaction : 2,
Connect : 3,
ObjectDeletion : 4
};
/**
Decodes AttributeUpdate messages into an EnvironmentalStateRepository object.
#class EnvironmentalStateDecoder
#constructor
#augments StateDecoder
#param {WebLVCConnection} webLVCConnection Connection to a WebLVC server
**/
mak.EnvironmentalStateDecoder = function(webLVCConnection) {
mak.StateDecoder.apply(this, arguments);
};
mak.EnvironmentalStateDecoder.prototype = Object.create(mak.StateDecoder.prototype, {
constructor : { value : mak.EnvironmentalStateDecoder },
/**
Decodes a AttributeUpdate message into an EntityStateRepository object.
#method decode
#param {Object} attributeUpdate WebLVC AttributeUpdate message
#param {EntityStateRepository} stateRep State repository to be updated
**/
decode : {
value : function( attributeUpdate, stateRep ) {
// if(this.webLVCConnection.timeStampType == mak.TimeStampType.TimeStampAbsolute &&
// attributeUpdate.TimeStampType == mak.TimeStampType.TimeStampAbsolute) {
// } else {
// stateRep.timeStampType = mak.TimeStampType.TimeStampRelative;
// }
stateRep.timeStampType = mak.TimeStampType.TimeStampRelative;
var curTime = 0.0;
// if (stateRep->timeStampType() == DtTimeStampAbsolute)
// {
// // Use timestamp as time of validity
// curTime = pdu.guessTimeValid(myExConn->clock()->simTime());
// }
// else
// {
// // Use receive time as time of validity
// curTime = myExConn->clock()->simTime();
// }
curTime = this.webLVCConnection.clock.simTime;
if(attributeUpdate.ProcessIdentifier != undefined) {
stateRep.entityIdentifier = attributeUpdate.EntityIdentifier;
}
if(attributeUpdate.Type != undefined) {
stateRep.entityType = attributeUpdate.Type;
}
if(attributeUpdate.ObjectName != undefined) {
stateRep.objectName = attributeUpdate.ObjectName;
}
if(attributeUpdate.GeometryRecords != undefined) {
stateRep.GeometryRecords = attributeUpdate.GeometryRecords;
}
if(attributeUpdate.EnvObjData != undefined) {
if(attributeUpdate.EnvObjData.VrfObjName != undefined) {
stateRep.marking = attributeUpdate.EnvObjData.VrfObjName;
}
}
}
}
});
.....
} (this.mak = this.mak || {}));
UPDATE
I used the ES6 module solution from estus (below), which I really like. It solved the rollup bunding issue, but there is still a runtime error.
But there is a little more that needs to be done. I am getting this error with chrome. I have two varients of the HTML main.html file, one uses the bundle and the other just imports my es6 modules. The error occurs even when I am not using rollup and creating and using the bundle.
Uncaught TypeError: Cannot set property objectName of [object Object] which has only a getter
at mak$1.ReflectedEntity.mak$1.ReflectedObject [as constructor] (vrlink.mjs:818)
at new mak$1.ReflectedEntity (vrlink.mjs:903)
at mak$1.ReflectedEntityList.value (vrlink.mjs:1358)
at mak$1.WebLVCMessageCallbackManager.<anonymous> (vrlink.mjs:1155)
at mak$1.WebLVCMessageCallbackManager.processMessage (vrlink.mjs:1745)
at mak$1.WebLVCConnection.drainInput (vrlink.mjs:2139)
at SimLink.tick (SimLink.js:34)
This seems to be the offender when converting from IIFE modules to ES6. It says that there is no setter.
The code is not my creation, but it seemed like it should not have be a major effort to convert IIFE to ES6. The offending snippet is:
mak.VrfBackendStateRepository = function (objectName) {
/**
Unique string identifying entity
#property objectName
#type String
**/
this.objectName = objectName; //error generated on this line!
If you are wondering what this is, it is a object called mak.webLVConnection, which is created by this function in the IIFE code:
/**
Represents a connection to a WebLVC server.
clientName and port are required. webLVCVersion is optional (current version
supported by the WebLVC server will be in effect). serverLocation is optional
( websocket connection will be made to the host servering the javascript )
#class WebLVCConnection
#constructor
#param {String} clientName String representing name of the client federate
#param {Number} port Websocket port number
#param {Number} webLVCVersion WebLVC version number
#param {String} serverLocation Hostname of websocket server
**/
mak.WebLVCConnection = function (clientName, port, webLVCVersion, serverLocation, url) {
var self = this;
if (clientName == undefined) {
throw new Error("clientName not specified");
}
if (!(typeof clientName == "string" && clientName.length > 0)) {
throw new Error("Invalid ClientName specified");
}
if (port == undefined) {
throw new Error("Port not specified");
}
if (url == undefined) {
url = "/ws";
}
var websocket;
if (serverLocation == undefined) {
if (location.hostname) {
websocket = new WebSocket("ws://" + location.hostname + ":" + port + url);
}
else {
websocket = new WebSocket("ws://localhost:" + port + "/ws");
}
}
else {
websocket = new WebSocket("ws://" + serverLocation + ":" + port + url);
}
/**
Websocket connected to a WebLVC server.
#property websocket
#type WebSocket
**/
this.websocket = websocket;
/**
DIS/RPR-style identifier, used to generate new unique IDs for entities simulated
through this connection. Array of 3 numbers [site ID, host ID, entity number].
#property currentId
#type Array
**/
this.currentId = [1, 1, 0];
/**
Manages registration and invoking of message callbacks.
#property webLVCMessageCallbackManager
#type WebLVCMessageCallbackManager
**/
this.webLVCMessageCallbackManager = new mak.WebLVCMessageCallbackManager();
/**
Simulation clock
#property clock
#type Clock
**/
this.clock = new mak.Clock();
/**
Indicates whether timestamping is relative or absolute
(mak.TimeStampType.TimeStampRelative or
mak.TimeStampType.TimeStampAbsolute).
#property {Number} timeStampType
**/
this.timeStampType = mak.TimeStampType.TimeStampRelative;
/**
List of incoming messages. When messages are received, they are placed
in this queue. The drainInput() member function must be called regularly
to remove and process messages in this queue.
#property {Array} messageQueue
**/
this.messageQueue = new Array();
/**
Callback function invoked on receipt of a message. Calls
webLVCMessageCallbackManager.processMessage().
#method processMessage
#private
**/
this.processMessage = this.webLVCMessageCallbackManager.processMessage.bind(this.webLVCMessageCallbackManager);
/**
Callback function invoked when websocket connection is opened. Sends
the initial WebLVC connect message.
#method onopen
#private
**/
this.websocket.onopen = function () {
var connectMessage = {
MessageKind: mak.MessageKindEnum.Connect,
ClientName: clientName
}
if (webLVCVersion != undefined) {
connectMessage.WebLVCVersion = webLVCVersion;
}
if (self.websocket.readyState == 1) {
self.websocket.send(JSON.stringify(connectMessage));
}
};
/**
Callback function invoked when a WebLVC message is received. Parses the
the JSON message data and passes the resulting object to processMessage.
#method onmessage
#event {Object} JSON message
#private
**/
this.websocket.onmessage = function (event) {
//just in case
if (event.data == "ping")
return;
var message = JSON.parse(event.data);
if (message != null) {
self.messageQueue.push(message);
} else {
console.warn("onmessage - null message received");
}
};
/**
Callback function invoked when the websocket is closed.
#method onclose
#private
**/
this.websocket.onclose = function () {
console.debug("In websocket.onclose");
};
/**
Callback function invoked when an error in the websocket is detected.
Sends warning to console.
#method onerror
#private
**/
this.websocket.onerror = function () {
console.log("websocket onerror");
};
this.isOk = function () {
return this.websocket.readyState == 1;
}
};
mak.WebLVCConnection.prototype = {
constructor: mak.WebLVCConnection,
/**
Set the DIS/RPR-style application ID.
#method set applicationId
#param {Array} applicationId Array of 2 integers [site ID, host ID].
**/
set applicationId(applicationId) {
this.currentId[0] = applicationId[0];
this.currentId[1] = applicationId[1];
this.currentId[2] = 0;
},
/**
Returns next available DIS/RPR-style entity ID.
#method nextId
#return {Array} Array of 3 integers [site ID, host ID, entity number].
**/
get nextId() {
this.currentId[2]++;
return this.currentId;
},
/**
Register callback function for a given kind of message.
#method addMessageCallback
#param {Number} messageKind WebLVC MessageKind
#param callback Function to be invoked
**/
addMessageCallback: function (messageKind, callback) {
this.webLVCMessageCallbackManager.addMessageCallback(messageKind, callback);
},
/**
De-register callback function for a given kind of message.
#method removeMessageCallback
#param messageKind WebLVC MessageKind
#param callback Function to be invoked
**/
removeMessageCallback: function (messageKind, callback) {
this.webLVCMessageCallbackManager.removeMessageCallback(messageKind, callback);
},
/**
Send a WebLVC message to the server.
#method send
#param {Object} message
**/
send: function (message) {
try {
if (this.websocket.readyState == 1) {
this.websocket.send(JSON.stringify(message));
}
} catch (exception) {
console.log("Error sending on websocket - exception: " + exception);
}
},
/**
Send a time-stamped WebLVC message to the server.
#method sendStamped
#param {Object} message
**/
sendStamped: function (message) {
// Timestamp is hex string
var timeStamp = this.currentTimeForStamping().toString(16);
//message.TimeStamp = ""; // timeStamp;
this.send(message);
},
/**
Get the current simulation time for a time stamp.
#method currentTimeForStamping
#return {Number} Simulation time in seconds.
**/
currentTimeForStamping: function () {
if (this.timeStampType == mak.TimeStampType.TimeStampAbsolute) {
return this.clock.simTime();
}
else {
return this.clock.absRealTime();
}
},
/**
Iterate through message queue, calling processMessage() and then
removing each message. Should be called regularly from your
application.
#method drainInput
**/
drainInput: function () {
var message;
while (this.messageQueue.length > 0) {
message = this.messageQueue.shift();
this.processMessage(message);
}
},
/**
Closes the websocket connection. Calls the destroy method on its
WebLVCMessageCallbackManager data member.
#method destroy
**/
destroy: function () {
console.debug("In WebLVCConnection.destroy");
this.webLVCMessageCallbackManager.destroy();
this.websocket.close();
}
};

UMD modules, by definition, are CommonJS. The code above is just IIFE and relies on mak global.
IIFE wrapper function can be replaced with default or named ES module export:
const mak = {};
mak.MessageKindEnum = { ... };
...
export default mak;
Or with CommonJS export:
const mak = {};
mak.MessageKindEnum = { ... };
...
module.exports = mak;

did you try:
(function (mak) {
...
}(module.exports));
// instead of
// } (this.mak = this.mak || {}));

Local variable becomes undefined in callback function in javascript

Im a java programmer trying to write javascript cant seem to grasp how scope changes when callbacks are called.
bot.sendmessage below failes to run. Error log says "undefined.bot.sendMessage(formId, resp)"
"use strict";
function Handlers() {
this.bot = undefined;
this.registerHandler = (bot)=>{
this.bot = bot;
bot.on('message', this._messageCallback);
bot.on('inline_query', this._inlineCallback)
}
}
Handlers.prototype = {
_messageCallback: (msg) => {
console.log("New Outline Request from: chat=" + msg.chat.id + ", uid=" + msg.from.id);
var fromId = msg.from.id;
var resp = "Hello there";
this.bot.sendMessage(fromId, resp);
},
_inlineCallback: (msg) => {
console.log("New Inline Request from: uid=" + msg.from.id);
/*
TODO::
check if user is in data base if not log new entry;
*/
}
};
module.exports = Handlers;

First I need to say Teemu is correct. This is an issue with Arrow Functions which I myself am unfamiliar with. If you would like to see an alternative way of acomplishing the same thing without using Arrow Functions take a look at the snippet below.
This code I would change later to be an Immediately-Invoked Function Expression (IIFE) but that is my personal programming habits. I don't know your exact use case here.
"use strict";
/**
* I'm assuming you have this elsewhere?
* If not I have added it to show how to do it
*/
function bot(){
/* ... */
}
bot.prototype = {
sendMessage: function(formId,resp){
console.log("Form: "+formId+" | Message: "+resp);
}
};
/**
* End of my addition
*/
function Handlers() {
this.bot = new bot();
/* ... */
}
Handlers.prototype = {
_messageCallback: function(msg){
/* ... */
var fromId = "fakeid123";
var resp = msg;
this.bot.sendMessage(fromId, resp);
},
_inlineCallback: function(msg){
/* ... */
}
};
var myModule= new Handlers();
myModule._messageCallback("Here is my test msg.");

Conference room availability in JavaScript

I am trying to create a room availability script for a conference room at my university. I decided to achieve it using jQuery by parsing a JSON feed of a public Google calendar and then displaying on the screen whether room is available or not.
I feel stupid, I have been fighting this problems for 3 days and no matter whether there is an appointment in Google calendar or not the script says that room is available. Could anyone offer a suggestion why this may be happening. I am not a programmer and I bet this is something really simple but I just can't seem to see it. Any help would be greatly appreciated!
A minimal working example on jsFiddle and below:
<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>

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

You can quickly check what state a variable is by using:
console.log(variableName);
This will output the results of the variable in your browser console tab (in Developer Tools).
In your case, I did console.log(events); where the events were to be looped, and I discovered that events were not being set. After some debugging, I determined that the code was $.getJSON() function wasn't completing 100% before the code below it was running (most likely because the ajax request takes time).
To fix this, I've moved all of your code that parses the events within the $.getJSON() function so that the events are properly retrieved and set before parsing the data.
Your code will look like this now:
Working 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);
}
});
});