maverick/public-apis
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

use Vue to fetch JSON

Browse source
This commit is contained in:
davemachado 2017-08-17 11:57:55 -04:00
parent 089979a9a9
commit 8ffe70daf1
2 changed files with 39 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/index.html
View file

@ -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 @@
</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 @@
</div>
<script src="scripts.js"></script>
</body>
<footer>
<script src="https://unpkg.com/vue@2.4.2/dist/vue.min.js"></script>
</footer>
</html>

88
src/scripts.js
View file

@ -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;
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" );
}
}
});
}
return show;
}
}
}).$mount('#app');
});
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;
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);
}
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" );
}
}
});
}
return show;
}
}
}).$mount('#app');
function filterRows() {
var input, filter, table, tr, td, i;