json 的 Mustache.js 模板不起作用？答案

【问题标题】：Mustache.js template for json not working?json 的 Mustache.js 模板不起作用？
【发布时间】：2015-06-21 02:05:50
【问题描述】：

我正在尝试将 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>

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

谢谢！

【问题讨论】：

标签： javascript html json node.js mustache

【解决方案1】：

哈哈，找到问题了，我需要 JSON.parse(msg) 因为 msg 被看成是一个纯字符串。

【讨论】：