如何将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表

回答

相关问题