Mustache.js & Google Sheets for Dynamic Content

This is a proof of concept, using Mustache.js, and a Google Sheets document to populate a menu to be used on a local restaurant's website. This would allow the live website's menu to be updated by a basic user without having to touch code at all. (Provisions would need to be made for "editing in production," but this could ease a significant amount of lift for the client.)

JSON data is pulled in using the Google sheets API from this, returning this file:

  "range": "Coffees!A2:C1000",
  "majorDimension": "ROWS",
  "values": [
      "A flavorful espresso blend of washed Ethiopian and natural Brazio coffees.",
      "We grew this coffee in the parking-lot and roasted it over a brush fire.",
      "Mung Bean",
      "Seriously, did you know that mung beans had 15x more caffiene than coffee?",

Mustache.js does not provide for nested arrays, so each entry is processed into keyed JSON hashes.

$.getJSON(url1, function(data) {

	let entries = data.values
	let total = entries.length
	var dataAlt = {"coffees":[]}
	for (var i = 0; i < total; i++) {
		dataAlt.coffees.push({"name": entries[i][0], "price":entries[i][1], "description":entries[i][2]})

	var template = $('#coffeeTemplate').html();
	var html = Mustache.to_html(template, dataAlt);


This then processed through a Mustache.js template:


The live output is below.