JSON 데이터를 HTML 테이블로 변환하는 방법

자신과 JSON 형식의 데이터에 대한 실시간 통계를 얻습니다. 문제는, 어떻게 html 웹 페이지에서이 테이블을 얻을 수 있는지 알 수 없습니다.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>

어떤 아이디어가? 문제를 해결하는 방법?

출처

2014-09-04 Timo Laine

콘솔 오류가 있습니까? 예기치 않은 동작이 있습니까? – Evgeniy

예상되는 출력은 무엇입니까? –

여러분의 문제 중 하나는 ''태그가 닫히지 않는 것일 수 있습니다. 데이터를 가져 오기 위해 HTML 노드 (빠른 Google이 아이디어를 제공해야 함)를 사용하는 것이 좋습니다. 잠시만 기다려주세요. 아무도 답변을 게시하지 않으면 나는 해결할 것입니다. 편집 : 또한 그냥 주위에''요소 주위의 견적을 닫지 않는 것으로 나타났습니다. – Jhecht

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합니다. API가 교차 출격 요청을 허용하지 않기 때문에 $http을 $timeout으로 변경했으며 사전 정의 된 데이터입니다.

출처

2014-09-04 07:55:26

JSON 데이터를 HTML 테이블로 변환하는 방법

답변

관련 문제