Question

我正在尝试将json字符串显示为HTML文件。 JSON字符串如下所示：

{"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}

使用我的Mustache模板的HTML源代码如下：

            <!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>

我唯一看到的是每个值之前的字符串，例如“Messages：” 如果我自己打印'msg'var，我会得到像上面这样的JSON而没有任何问题。我在模板中做错了什么？

谢谢！

Answer 1

哈哈，发现问题，我需要JSON.parse（msg），因为msg被视为一个普通的字符串。

json的Mustache.js模板无法正常工作？

1 个答案: