Skip to content

Instantly share code, notes, and snippets.

@Willshaw Willshaw/api.cfc
Last active Dec 20, 2017

Embed
What would you like to do?
auto reloading Vue/API table viewer
/*
this file just needs to return an array of objects with key/value pairs
e.g. [{foo: 'bar', food: 'cheese'},{foo:'fighter',food:'jagermeister'}];
*/
component {
remote function load() {
var qry = new core.utility.queryWrapper();
var str_select = '
SELECT *
FROM `database`.`table`
ORDER BY `timestamp` DESC
';
var skv_select = qry.execute( str_select, [], true );
return skv_select;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Table viewer</title>
<style>
</style>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
</head>
<body>
<cfoutput>
<div class="container" id="app">
<!-- simple status bar -->
<p class="alert alert-warning">{{status}}<p>
<!-- log table -->
<table class="table">
<thead>
<tr>
<!-- loop over keys of first item -->
<th v-for="(val,key) in log[0]">
{{key}}
</th>
</tr>
</thead>
<tbody>
<!-- loop over log entries -->
<tr v-for="entry in log">
<!-- output value -->
<td v-for="(val,key) in entry">
{{val}}
</td>
</tr>
</tbody>
</table>
</div>
</cfoutput>
<!-- use axios ajax library -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- load vue -->
<script src="https://unpkg.com/vue@2.5.13/dist/vue.min.js"></script>
<script>
// mega simple vue app
var app = new Vue({
// hook to the dom
el: '#app',
// simple data for the template above
data: {
status: 'App loaded',
log: []
},
// this runs when the tool is created
created: function() {
// grab data initially
this.loadData();
// set an interval to reload at set interval
setInterval(
// call the load data method again
this.loadData,
// do it every 1000 milliseconds (each second)
1000
);
},
methods: {
loadData: function() {
// set this = self to get around the this scope
// changing context in the ajax call return
var self = this;
// load the data from the api
// this could be php or anything that returns an
// array of key/value pairs in JSON format
axios.get('api.cfc?method=load&returnformat=json')
.then(function (response) {
// update the log object
self.log = response.data.data;
// set the status
self.status = 'loaded data';
// bugger all error handling, becuase this
// is just for dev use, if you see console errors
// then fix them
})
.catch(function (error) {
// if the ajax call fails, this should help
console.log(error);
// set a failed status
self.status = 'ajax call failed';
});
}
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.