Mustache.js template for json not working?

464 views Asked by At

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!

1

There are 1 answers

0
emmerich On

Haha, found the problem, I need to JSON.parse(msg) because msg is seen as a plain string.