heycarsten/lcbo-api-example.html

## lcbo-api-example.html
<!DOCTYPE html>
<html>
  <head>
    <title>Using LCBO API via jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
    <script type="text/javascript">
      // Let's make an object in the global namespace that will serve as an API
      // wrapper for LCBO API.
      var LCBO = new function() {
        this.allStoresWithProduct = function(product_id, callback) {
          getPages('/products/' + product_id + '/stores', callback);
        };

        this.product = function(id, callback) {
          get('/products/' + id, callback);
        };

        this.store = function(id, callback) {
          get('/stores/' + id, callback);
        };

        function get(url, callback) {
          httpGet(url, function(response) {
            callback(response.result)
          });
        }

        function httpGet(url, callback) {
          $.ajax({
            url: 'http://lcboapi.com' + url,
            dataType: 'jsonp',
            success: function(data) {
              if (200 == data.status) {
                callback(data);
              } else {
                alert('There was an error [' + data.status + ']: ' + data.message);
              }
            }
          });
        }

        function getPages(url, callback) {
          var memo = [], meta = {};
          function getPage(url) {
            httpGet(url, function(response) {
              memo = memo.concat(response.result);
              if (response.product) meta['product'] = response.product;
              if (response.store) meta['store'] = response.store;
              if (response.pager.next_page_path) {
                getPage(response.pager.next_page_path, arguments.callee);
              } else {
                callback(memo, meta);
              }
            });
          }
          getPage(url);
        }
      };

      function report(products, stores, show_quantity) {
        var tpl = $('#report_tpl').text();
        var html = _.template(tpl, {
          products: products,
          stores: stores,
          show_quantity: show_quantity
        });
        $('#report').append(html);
      }

      $(function() {
        var product_ids = [682880, 119370];
        var products    = [];
        var all_stores  = [];
        var store_sets  = [];

        $.each(product_ids, function(i, id) {
          LCBO.allStoresWithProduct(id, function(stores, meta) {
            products.push(meta.product);
            all_stores = all_stores.concat(stores);
            store_sets.push(_.pluck(stores, 'id'));
            report([meta.product], stores, true);

            if (_.size(store_sets) === _.size(product_ids)) {
              var same_store_ids = _.intersect.apply(_.intersect, store_sets);
              var same_stores = _.select(all_stores, function(store) {
                return _.include(same_store_ids, store.id);
              });
              report(products, same_stores);
            }
          });
        });
      });
    </script>
  </head>
  <body>
    <section id="report"></section>
    <script id="report_tpl" type="text/ejs+html">
      <section>
        <h2>
          <%= stores.length %> stores with
          <%= _.pluck(products, 'name').join(', ') %>:
        </h2>
        <table>
          <tr>
            <th>Name</th>
            <th>Address</th>
            <% if (show_quantity) { %>
              <th>Quantity</th>
            <% } %>
          </tr>
          <% _.each(stores, function(store) { %>
            <tr>
              <td><%= store.name %></td>
              <td><%= store.address_line_1 %></td>
              <% if (show_quantity) { %>
                <td><%= store.quantity %></td>
              <% } %>
            </tr>
          <% }); %>
        </table>
      </section>
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Using LCBO API via jQuery</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
	<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
	<script type="text/javascript">
	// Let's make an object in the global namespace that will serve as an API
	// wrapper for LCBO API.
	var LCBO = new function() {
	this.allStoresWithProduct = function(product_id, callback) {
	getPages('/products/' + product_id + '/stores', callback);
	};

	this.product = function(id, callback) {
	get('/products/' + id, callback);
	};

	this.store = function(id, callback) {
	get('/stores/' + id, callback);
	};

	function get(url, callback) {
	httpGet(url, function(response) {
	callback(response.result)
	});
	}

	function httpGet(url, callback) {
	$.ajax({
	url: 'http://lcboapi.com' + url,
	dataType: 'jsonp',
	success: function(data) {
	if (200 == data.status) {
	callback(data);
	} else {
	alert('There was an error [' + data.status + ']: ' + data.message);
	}
	}
	});
	}

	function getPages(url, callback) {
	var memo = [], meta = {};
	function getPage(url) {
	httpGet(url, function(response) {
	memo = memo.concat(response.result);
	if (response.product) meta['product'] = response.product;
	if (response.store) meta['store'] = response.store;
	if (response.pager.next_page_path) {
	getPage(response.pager.next_page_path, arguments.callee);
	} else {
	callback(memo, meta);
	}
	});
	}
	getPage(url);
	}
	};

	function report(products, stores, show_quantity) {
	var tpl = $('#report_tpl').text();
	var html = _.template(tpl, {
	products: products,
	stores: stores,
	show_quantity: show_quantity
	});
	$('#report').append(html);
	}

	$(function() {
	var product_ids = [682880, 119370];
	var products = [];
	var all_stores = [];
	var store_sets = [];

	$.each(product_ids, function(i, id) {
	LCBO.allStoresWithProduct(id, function(stores, meta) {
	products.push(meta.product);
	all_stores = all_stores.concat(stores);
	store_sets.push(_.pluck(stores, 'id'));
	report([meta.product], stores, true);

	if (_.size(store_sets) === _.size(product_ids)) {
	var same_store_ids = _.intersect.apply(_.intersect, store_sets);
	var same_stores = _.select(all_stores, function(store) {
	return _.include(same_store_ids, store.id);
	});
	report(products, same_stores);
	}
	});
	});
	});
	</script>
	</head>
	<body>
	<section id="report"></section>
	<script id="report_tpl" type="text/ejs+html">
	<section>
	<h2>
	<%= stores.length %> stores with
	<%= _.pluck(products, 'name').join(', ') %>:
	</h2>
	<table>
	<tr>
	<th>Name</th>
	<th>Address</th>
	<% if (show_quantity) { %>
	<th>Quantity</th>
	<% } %>
	</tr>
	<% _.each(stores, function(store) { %>
	<tr>
	<td><%= store.name %></td>
	<td><%= store.address_line_1 %></td>
	<% if (show_quantity) { %>
	<td><%= store.quantity %></td>
	<% } %>
	</tr>
	<% }); %>
	</table>
	</section>
	</script>
	</body>
	</html>