Add data to render each menu item

data.json

@@ -1,10 +1,11 @@
 {
-	"Sandwiches": "",
+	"collection": "sandwiches",
+	"title": "Sandwiches",
 	"entrees": [
 		{
-			"name": "",
+			"name": "Bánh Mì",
-			"description": "",
+			"description": "Slow roasted pork belly, with fresh pickled carrots, onion and cucumbers with jalapeños, red peppers and cilantro on panini bread with sweet chili mayo.",
-			"price": ""
+			"price": 14
 		}
 	]
 }

index.html

@@ -38,5 +38,18 @@
 
 <h4>Phone</h4>
 <a href="tel:+13603855275">360.385.5275</a>
+
+<div id="container">
+	<h3>{{ menu.title }}</h3>
+	<ul>
+		<li v-for="item in menu.entrees">
+			{{ item.name }}: {{ item.description }}
+		</li>
+	</ul>
+</div>
+
+
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+<script src="/scripts/index.js"></script>
 </body>
 </html>

scripts/index.js

@@ -0,0 +1,34 @@
+// When the DOM is ready it'll execute fn().
+function ready(fn) {
+	if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
+		fn();
+	} else {
+		document.addEventListener('DOMContentLoaded', fn);
+	}
+}
+
+ready(function() {
+	var getFile = function(url, cb) {
+		var request = new XMLHttpRequest();
+		request.open('GET', url, false);
+		request.onload = function() {
+			if (this.status >= 200 && this.status < 400) {
+				// Success!
+				var json = JSON.parse(this.response);
+				var app = new Vue({
+					el: '#container',
+					data: {
+						menu: json
+					}
+				});
+			} else {
+				console.log("We reached our target server, but it returned an error");
+			}
+		};
+		request.onerror = function() {
+			console.log("There was a connection error of some sort");
+		};
+		request.send();
+	};
+	var data = getFile('/data.json');
+});

templates/menu.mst

@@ -0,0 +1 @@
+<h3>{{ title }}</h3>