2015-06-20 56 views
0

我想顯示一個json字符串到一個HTML文件中。 JSON字符串看起來是這樣的:jones不工作的mustache.js模板?

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

,並與我的小鬍子模板中的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> 

我唯一看到的是每個值之前的字符串,如「消息:「 如果我自己打印'味精'變種,我得到像上面的JSON沒有任何問題。 我在模板中做了什麼錯誤?

謝謝!

回答

0

哈哈,發現問題,我需要JSON.parse(味精),因爲信息被視爲一個普通的字符串。