use Vue to fetch JSON

davemachado · davemachado · commit 8ffe70daf1b3 · 2017-08-17T11:57:55.000-04:00
diff --git a/src/index.html b/src/index.html
@@ -7,6 +7,7 @@
         <link rel="stylesheet" type="text/css" href="styles.css"/>
         <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
         <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+		<script src="https://unpkg.com/vue@2.4.2/dist/vue.min.js"></script>
 		<title>Public APIs</title>
 	</head>
 	<header>
@@ -38,7 +39,7 @@ <h3 class="center-text">
 						</tr>
 		  			</thead>
 					<tbody>
-						<tr v-for="item in data" v-show="filtered(item)">
+						<tr v-for="item in items">
 							<td><a :href="item.Link">{{ item.API }}</a></td>
 							<td>{{ item.Description }}</td>
 							<td>{{ (item.Auth) ? item.Auth : '-' }}</td>
@@ -51,8 +52,5 @@ <h3 class="center-text">
 		</div>
 	 	<script src="scripts.js"></script>
 	</body>
-	<footer>
-			<script src="https://unpkg.com/vue@2.4.2/dist/vue.min.js"></script>
-	</footer>
 </html>
 
diff --git a/src/scripts.js b/src/scripts.js
@@ -1,55 +1,41 @@
- loadJSON(function(response) {
-    var items = JSON.parse(response);
-	new Vue({
-		data: {
-			filter: ''
-		},
-		computed: {
-			data() {
-				return items.entries;
-			}
-		},
-		methods: {
-			filtered(item) {
-				let show = true;
+new Vue({
+	data: {
+		filter: '',
+		items: ''
+	},
+	created() {
+		fetch('https://raw.githubusercontent.com/toddmotto/public-apis/master/json/entries.min.json')
+		.then(data => data.json())
+		.then(data => {
+			this.items = data.entries;
+		})
+	},
+	methods: {
+		filtered(item) {
+			let show = true;
+
+			if(this.filter.length) {
 				
-				if(this.filter.length) {
-					
-					show = false;
-					
-					let filterKeyword = this.filter.toLowerCase();
-					
-					Object.keys(item).map(function(key) {
-						if(typeof item[key] === 'string') {
-							let value = item[key].toString().toLowerCase();
-							
-							if(value.includes(filterKeyword)) {
-								show = true;
-								$( "th" ).addClass( "lol" );
-							}
-						}
+				show = false;
+
+				let filterKeyword = this.filter.toLowerCase();
+
+				Object.keys(item).map(function(key) {
+					if(typeof item[key] === 'string') {
+						let value = item[key].toString().toLowerCase();
 						
-					});
-				}
-				return show;
+						if(value.includes(filterKeyword)) {
+							show = true;
+							$( "th" ).addClass( "lol" );
+						}
+					}
+
+				});
 			}
+			return show;
 		}
-	}).$mount('#app');
-});
-
-function loadJSON(callback) {   
-    var xobj = new XMLHttpRequest();
-        xobj.overrideMimeType("application/json");
-    xobj.open('GET', 'https://raw.githubusercontent.com/toddmotto/public-apis/master/json/entries.min.json', true);
-    xobj.onreadystatechange = function () {
-          if (xobj.readyState == 4 && xobj.status == "200") {
-            // Required use of an anonymous callback as .open will NOT return a value
-            // but simply returns undefined in asynchronous mode
-            callback(xobj.responseText);
-          }
-    };
-    xobj.send(null);  
- }
+	}
+}).$mount('#app');
 
 function filterRows() {
   var input, filter, table, tr, td, i;
