충전 테이블

Question

나는이 특정 테이블이 있습니다

{ 
    "reportSummary": { 
     "totalMessagesSent": 23, 
     "totalMessagesProcessed": 10384, 
     "averageMessagesPerSecond": 2.3E-8 
    } 
} 

내가 위의 해당 테이블을 채우려 : 어딘가에 내가 JSON과는 그루비에서 생성 한 디스크에

<div class="chartHeader"><p>Performance statistics summary</p></div> 
<table id="tableSummary"> 
    <tr> 
     <th>Measurement name</th> 
     <th>Result</th> 
    </tr> 
    <tr> 
     <td>Total messages sent</td> 
     <td id = "totalMessagesSent"></td> 
    </tr> 
    <tr> 
     <td>Total messages processed</td> 
     <td id = "totalMessagesProcessed"></td> 
    </tr> 
    <tr> 
     <td>Average messages per second</td> 
     <td id = "averageMessagesPerSecond"></td> 
    </tr> 
</table> 

을 그 json에서 데이트 자바 스크립트를 사용하여 많은 버전을 시도했지만 그것을 만들 수 없습니다 내 HTML 페이지에서 :

<script type="text/javascript">fillTableWithData('reportSummary.json');</script> 

그리고 스크립트는 현재이 같은이지만, 그것은 작동하지 않습니다

는

function fillTableWithData(filename) { 
    var reader = new FileReader(); 
    var jsonFile = reader.readAsText(filename); 
    var jsons = d3.json(jsonFile); 

    d3.select("#totalMessagesSent").append(jsons.totalMessagesSent); 
    d3.select("#totalMessagesProcessed").append(jsons.totalMessagesProcessed); 
    d3.select("#averageMessagesPerSecond").append(jsons.averageMessagesPerSecond); 
} 

는 사람이 얼마나 제대로 수행하는 날을 제안 할 수 있을까요? 나는 그것에 너무 많은 시간을 보냈다. 그리고 나는 현재 아이디어가 없다. .. 어떤 도움이라도 인정했다. 미리 감사드립니다.

편집 : 순수한 JS에서 쉽게 경우에, 나는 그 문제에 대한 해결책은 여기에 ... 모두 여기 D3를 사용하는

Answer 1

필요하지 않습니다 :

function fillTableWithData(filename) { 

var data_file = filename; 
var http_request = new XMLHttpRequest(); 
try { 
    http_request = new XMLHttpRequest(); 
} catch (e) { 
    try { 
     http_request = new ActiveXObject("Msxml2.XMLHTTP"); 
    } catch (e) { 
     try { 
      http_request = new ActiveXObject("Microsoft.XMLHTTP"); 
     } catch (e) { 
      alert("Your browser broke!"); 
      return false; 
     } 
    } 
} 
http_request.onreadystatechange = function() { 
    if (http_request.readyState == 4) { 
     var jsonObj = JSON.parse(http_request.responseText); 

     document.getElementById("messagesSent").innerHTML = jsonObj.reportSummary.messagesSent; 
     document.getElementById("tradeEventsProcessed").innerHTML = jsonObj.reportSummary.tradeEventsProcessed; 
     document.getElementById("averageMessagesPerSecond").innerHTML = jsonObj.reportSummary.averageMessagesPerSecond; 
    } 
} 
http_request.open("GET", data_file, true); 
http_request.send(); 
} 

우리는 '수 js를 사용하여 클라이언트 측에서 작동하는 파일을로드합니다.