如何將JSON數據轉換爲html表

我獲得了我自己的實時統計數據和JSON格式的數據。問題是，我無法確定如何在html網頁中獲取此表格。如何將JSON數據轉換爲html表

我已經試過這樣的事情，但沒有成功：

<!DOCTYPE html> 
    <html> 
    <body> 
     <div id="id01"></div> 
     <script> 
     var xmlhttp = new XMLHttpRequest(); 
     var url = "http://testinki.info/apidata/"; 

     xmlhttp.onreadystatechange=function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      myFunction(xmlhttp.responseText); 
      } 
     } 
     xmlhttp.open("GET", url, true); 
     xmlhttp.send(); 
     function myFunction(response) { 
      var arr = JSON.parse(response); 
      var i; 
      var out = "<table>"; 

      for(i = 0; i < arr.length; i++) { 
       out += "<tr><td>" + 
       arr[i].apikey + 
       "</td></tr>" 
      } 
      out += "</table>" 
      document.getElementById("id01").innerHTML = out; 
     } 
     </script> 
    </body> 
</html>

任何想法？如何解決問題？

來源

2014-09-04 Timo Laine

任何控制檯錯誤？任何意外的行爲？ – Evgeniy 2014-09-04 07:11:07

你期待什麼輸出？ – 2014-09-04 07:14:29

你的問題之一可能是你永遠不會關閉創建的''標籤。我建議使用HTML節點（快速谷歌應該給你一個想法）來獲取數據。給我一秒鐘，如果沒有人發佈了答案，我會解決一個問題。編輯：另外，只是注意到你不會關閉''元素的報價。 – Jhecht 2014-09-04 07:16:00

AngularJS可能是一個很好的解決方案。從你的鏈接數據，代碼會是這個樣子：

Api key: {{data.apikey}} 
    <br> 
    User: 
    <pre>{{data.data|json}}</pre> 
    <br> 
    <table> 
    <tr ng-repeat="member in data.Members"> 
     <td>{{member.name}}</td> 
     <td>{{member.info}}</td> 
    </tr> 
    </table>

angular 
.module("app", []) 
.controller("ctrl", function ($http, $scope, $http) { 
    $http 
    .get("http://testinki.info/apidata/") 
    .then(function (res) { 
    $scope.data = res; 
    }) 
})

JSBin example。我已將$http更改爲$timeout和預定義的數據，因爲您的API不允許跨源請求。

來源

2014-09-04 07:55:26

如何將JSON數據轉換爲html表

回答

相關問題