Here's my JavaScript file that queries data from Parse and then updates my Handlebars.js template to display them. The code has 3 async calls using a Promise. It still feel like it could be improved, specifically in the Promises results loop where I check which i value it is. I'm not guaranteed that the bar we're on in the first loop is the same as in the second or third loop, which is why I have the nested loop checking if the names are the same to ensure it's the right one. Could I order them all alphabetically or something so that I can eliminate that? It seems like a lot of repeated code.
$(document).ready(function(){
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
Parse.initialize("ID","ID");
var latlng = new google.maps.LatLng(42.035021, -93.645);
var mapOptions = {
center: latlng,
scrollWheel: false,
zoom: 13
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// The Handlebars template for a bar item
var source = $("#barTemplate").html();
var template = Handlebars.compile(source);
// Object containing the list of bars
var data = new Object();
var barList = new Array();
// Build an array of Parse queries
var queries = [];
var Bar = Parse.Object.extend("Bars");
var Deals = Parse.Object.extend("Deals");
var Photos = Parse.Object.extend("BarPhotos");
queries.push(new Parse.Query(Bar).find())
queries.push(new Parse.Query(Deals).find())
queries.push(new Parse.Query(Photos).find())
// Wait for them all to complete
Parse.Promise.when(queries).then(function() {
// The results of each query are returned as arguments to the callback
for(var i = 0, l = arguments.length; i < l; i++) {
if (i == 0) {
// Add the retrieved bars to the map
for (var j = 0; j < arguments[i].length; j++) {
var bar = arguments[i][j];
var latlng = new google.maps.LatLng(bar.get('lat'), bar.get('long'));
var marker = new google.maps.Marker({
position: latlng,
map: map,
animation: google.maps.Animation.DROP
});
barList.push({"name": bar.get('name'), "deals": [], "img": ""});
}
// Add the retrieved deals to the bar
for (var j = 0; j < arguments[i+1].length; j++) {
var bar = arguments[i+1][j];
var barName = bar.get('name');
var dealsArr = new Array();
var arr = bar.get('Monday');
for (var k = 0; k < arr.length; k++) {
dealsArr.push({"deal": arr[k]});
}
// Loop through bars to find match
for (var l = 0; l < barList.length; l++) {
if (barList[l].name == barName) {
// Update the deals array property
barList[l].deals = dealsArr;
}
}
}
// Add the retrieved images to the bar
for (var j = 0; j < arguments[i+2].length; j++) {
var bar = arguments[i+2][j];
var barName = bar.get('barName');
var imageFile = bar.get('imageFile');
var imageURL = imageFile.url();
// Loop through bars to find match
for (var l = 0; l < barList.length; l++) {
if (barList[l].name == barName) {
// Update the image property
barList[l].img = imageURL;
}
}
}
}
}
// Update template with bars
data = {bars: barList};
$("#barList").html(template(data));
});
};
});