// don't cache ajax or content won't be fresh $.ajaxSetup({ cache: false }); var feedId = "mthayes"; var apiKey = ""; // not needed for public feeds, use either api key or access key if the feed is not public var accessKey = ""; var apiBaseUrl = "//www.teleport.nu/api/v1"; // query a 24 hour period, frames 1 hour apart var startTime = "2013-09-21T01:00:00Z"; var endTime = "2013-09-22T01:00:00Z"; var interval = 3600; var url = apiBaseUrl + "/frame-query?feedid=" + feedId + "&starttime=" + startTime + "&endtime=" + endTime + "&interval=" + interval + "&apikey=" + apiKey + "&accesskey=" + accessKey; var frameUrl = apiBaseUrl + "/frame-get?feedid=" + feedId + "&frametime=FRAMETIME" + "&sizecode=480p" + "&apikey=" + apiKey + "&accesskey=" + accessKey; $("#runButton").click(function () { $("#resultImages").html(""); $.ajax({ url: url, type: "GET", success: function (data, textStatus, jqXHR) { // got the result $("#resultJSON").html(jqXHR.responseText); var frameTimes = data.Frames; // load the result images (first 10) for (var i = 0; i < Math.min(10, frameTimes.length); i++) { var frameTime = frameTimes[i]; var imageTemplate = '<img src="URL" style="max-height: 120px;"/>'; var frameUrlForTime = frameUrl.replace("FRAMETIME", frameTime); imageTemplate = imageTemplate.replace("URL", frameUrlForTime); $("#resultImages").append(frameTime); $("#resultImages").append("<br/>"); $("#resultImages").append(imageTemplate); $("#resultImages").append("<br/>"); $("#resultImages").append("<br/>"); } }, error: function (jqxhr, textStatus, error) { $("#resultJSON").html("Error: " + jqxhr.status + ', ' + textStatus + ', ' + error); } }); });
<button id="runButton">Run</button> <br/> <br/>Response JSON: <div id="resultJSON"></div> <br/>Response Images: <div id="resultImages"></div>