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": [
    [
      "Kanzu",
      "A flavorful espresso blend of washed Ethiopian and natural Brazio coffees.",
      "$2.75/$3.75/$4.75"
    ],
    [
      "Oviedo",
      "We grew this coffee in the parking-lot and roasted it over a brush fire.",
      "$2.75/$3.75/$4.75"
    ],
    [
      "Mung Bean",
      "Seriously, did you know that mung beans had 15x more caffiene than coffee?",
      "$2.75/$3.75/$4.75"
    ]
  ]
}
					

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);
	$('#coffeeBox').html(html);

});

This then processed through a Mustache.js template:

{{#coffees}}
	<h2>{{name}}</h2>
	<h3>{{price}}</h3>
	<h4>{{description}}</h4>
{{/coffees}}
					

The live output is below.