I'm trying to display a json string into a HTML file. The JSON string looks like this:
{"Time":1434819678189,"Name":"flight.LOL123 ","Hex":"3c5451","Squawk":"5430","Altitude":36000,"VerticalRate":64,"Latitude":69.287773,"Longitude":99.338745,"Track":294,"Speed":429,"LastSeen":0,"Messages":4873}
and the HTML source with my Mustache template looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ADSB Data | Alerts</title>
<script src="js/socket.io-1.3.5.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/script.js"></script>
<script src="js/mustache.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/bootstrap.min.js"></script>
<style>
body {
padding-top: 50px;
background: url('img/bkg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.jumbotron {
background: rgb(224,224,224); /* This is for ie8 and below */
background: rgba(224,224,224, 0.85);
}
</style>
</head>
<body >
<div class="container">
<div class="jumbotron" id="alert">
<p>Alert list</p>
</div>
</div>
<script>
var socket = io('http://localhost:7777');
socket.on('message', function (msg) {
var div = document.getElementById ("alert");
var template = "<p>Time: {{Time}}</p>" +
"<p>Name: {{Name}}</p> " +
"<p>Hex: {{Hex}}</p> " +
"<p>Squawk: {{Squawk}} </p>" +
"<p>Altitude: {{Altitude}} </p>" +
"<p>Vertical Rate: {{VerticalRate}}</p>" +
"<p>Latitude: {{Latitude}} </p>" +
"<p>Longitude: {{Longitude}} </p>" +
"<p>Heading: {{Track}} </p>" +
"<p>Speed: {{Speed}} </p>" +
"<p>Lat seen: {{LastSeen}} </p>" +
"<p>Messages: {{Messages}} </p>";
var html = Mustache.to_html(template, msg);
div.innerHTML = "<h1>Alert!</h1>" + html + "</div>";
});
</script>
</body>
</html>
The only thing I see are the strings before each of the values, like "Messages: " If I print the 'msg' var by itself I get the JSON like above without any problems. What have I done wrong in my template?
Thank you!
Haha, found the problem, I need to JSON.parse(msg) because msg is seen as a plain string.