Working on making a movie feed page, unfortunately the only API I was able to find has a 50 calls/day limit so I need to cache the jsonp response locally and directly parse that instead to get around the call limit and just refresh the showtimes at a specified time.
My problem is that loading the data from the cached jsonp file fails to display anything, but the directly loaded data displays just fine.
Here is the script I currently have that should be parsing the cached jsonp file
<script>
// construct the url with parameter values, do not need API keying information, this data is cached and requested once a day by the server
var baseUrl = "https://example.com";
var showtimesUrl = baseUrl + '/movie-data/gracenote-sample.jsonp';
$(document).ready(function() {
// send off the query
$.ajax({
url: showtimesUrl,
data: {jsonp: "dataHandler",},
dataType: "jsonp",
success: function( data ) {
console.log( data ); // server response
}
}
);
});
// callback to handle the results
function dataHandler(data) {
$(document.body).append('<p>Found ' + data.length + ' movies showing within 2 miles of Hacienda Crossings:</p>');
var movies = data.hits;
$.each(data, function(index, movie) {
var movieData = '<div class="MovieListingWrapper"><img class="movie-poster" src="http://movies.tmsimg.com/' + movie.preferredImage.uri + '?api_key='+apikey+'"><h2 class="MovieTitle">'+movie.title+'</h2>';
movieData += movie.title;
if (movie.ratings) { movieData += ' (' + movie.ratings[0].code + ') </div>' };
$(document.body).append(movieData);
});
}
The response sends back a standard jsonp file and exactly matches the response I get from the API. Below is the script I use to request the current data, not the cached.
<script>
// construct the url with parameter values
var apikey = "nope.avi";
var baseUrl = "http://data.tmsapi.com/v1.1";
var showtimesUrl = baseUrl + '/movies/showings';
var zipCode = "12345";
var radius = "2";
var imageSize = "Md";
var imageText = "true";
var d = new Date();
var today = d.getFullYear() + '-' + (d.getMonth()+1) + '-' + d.getDate();
$(document).ready(function() {
// send off the query
$.ajax({
url: showtimesUrl,
data: { startDate: today,
zip: zipCode,
radius: radius,
api_key: apikey,
jsonp: "dataHandler",
},
dataType: "jsonp",
});
});
// callback to handle the results
function dataHandler(data) {
$(document.body).append('<p>Found ' + data.length + ' movies showing within 2 miles of ' + zipCode+':</p>');
var movies = data.hits;
$.each(data, function(index, movie) {
var movieData = '<div class="MovieListingWrapper"><img class="movie-poster" src="http://movies.tmsimg.com/' + movie.preferredImage.uri + '?api_key='+apikey+'"><h2 class="MovieTitle">'+movie.title+'</h2>';
movieData += movie.title;
if (movie.ratings) { movieData += ' (' + movie.ratings[0].code + ') </div>' };
$(document.body).append(movieData);
});
}
Yet, the version loading the cached variant of the API data refuses to display anything, and nothing shows up in the error console. But the version loading directly from the API works and displays the data correctly.
I would post the jsonp response here, but it's a massive response. If you want it I will gladly PM a direct file.
