3
\$\begingroup\$

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));
  });
};
});
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.