I need assistance with displaying the output of an SQL query on my website. My server-side is using NodeJs and client-side is VueJs.
After querying my database, I received the following result:
[
{
Time_Stamp: 2019-12-09T11:54:00.000Z,
Time_Stamp_ms: 136,
CadenceInstant195: 660,
TempsCycle: 5388,
Totalisateur195: 0,
NCPoste1: 87,
NCPoste2: 2649,
NCPoste4: 503,
NCPoste6: 1821,
NCPoste7: 5590,
EtatMachine: 0
},
{
Time_Stamp: 2019-12-09T11:55:00.000Z,
Time_Stamp_ms: 200,
CadenceInstant195: 660,
TempsCycle: 5395,
Totalisateur195: 0,
NCPoste1: 87,
NCPoste2: 2649,
NCPoste4: 503,
NCPoste6: 1821,
NCPoste7: 5590,
EtatMachine: 0
}
]
The result is stored in a variable in my JS file like so:
window.onload = function () {
var consultation = new Vue({
el:"#consultation",
data: {
data : []
},
methods: {
load: function() {
this.$http.get("/data?startDate="+this.filtres.startDate+" "+this.filtres.startHour+"&endDate="+this.filtres.endDate+" "+this.filtres.endHour).then(function(response) {
this.data = response.body;
console.log(this.data);
})
}
}
})
}
The load() function executes the query to the database.
Here's my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Historique</title>
</head>
<body>
<div id="consultation">
{{todos}}
</div>
<script src='/AffichageHistorique/js/vue.js'></script>
<script src='/AffichageHistorique/js/vue-resource.min.js'></script>
<script src='/AffichageHistorique/js/historique.js'></script>
</body>
</html>
Now, I'm struggling to display the query result on my webpage. Placing {{data}} into my HTML isn't showing anything. Any suggestions?