Question

我获得了自己的实时统计数据和JSON格式的数据。问题是，我无法想象如何在html网页中获取此表。

可在以下网址找到数据：http://testinki.info/apidata/

我尝试过这样的事情，但没有成功：

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

有什么想法吗？如何解决问题？

Answer 1

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不允许跨源请求。

如何将JSON数据转换为html表

1 个答案: