.json 파일에서 HTML로

Question

나는 HTML 테이블로 표현할 필요가있는 .json 파일에 json 객체의 배열을 가지고 있습니다. 아무도 나를 어떻게 도와 줄 수 있습니까? 내가 같은 HTML 테이블로 표현하기 위해 필요

[{"Date":"2013/02/26"},{"Scn1":{"Avg":500 , "Count":5 , "Max":700}},{"Scn2":{"Avg":800 , "Count":6 , "Max":1000}},{"Scn3":{"Avg":500 , "Count":5 , "Max":700}}] 

: test.json 파일 등의 데이터가

Date:_______ 

|Scenario | Avg value | Count | Max value | 
|   |   |  |   | 
|   |   |  |   | 
|   |   |  |   | 

Answer 1

이것은 매우 일반적인 질문과 코멘트입니다 (아래-투표) 맞습니다. 게시하기 전에 시도한 것에 대한 자세한 정보를 제공해야합니다. 그러나 나는 행복한 기분에 있습니다. ...

그 데이터는 루핑을 통해 꽤 나쁜 형식입니다. 약간 조정할 능력이 있다면 그렇게하십시오. 일대 다인 것은 배열이어야합니다 (하나의 날짜에는 여러 시나리오가 있음). 일대일 대응은 모두 동일한 객체의 속성 (예 : 시나리오 이름 및 평균)이어야합니다. 데이터가 '올바른'형식이면 계층 구조의 각 수준에 대해 중첩 루프가 필요합니다. 두 단계 (날짜와 시나리오)가 있으므로 두 개의 루프가 있습니다. 각각은 행을 씁니다.

는 그런 일반적인 생각은 다음과 같습니다 이것은 DOM에 요소를 추가 할 jQuery를 사용

var dataSet = [{"Date":"2013/02/26", 
       scenarios: [ 
        {name: "Scn1","Avg": 500,"Count": 5,"Max": 700}, 
        {name: "Scn2","Avg": 800,"Count": 6,"Max": 1000}, 
        {name: "Scn3","Avg":500,"Count":5,"Max":700} 
       ] 
       }]; 


(function draw(data) { 
    var i, j; 

    for (i = 0; i < data.length; i++) { 
     $('#myTable').append('<tr><td colspan="4">' + data[i].Date + '</td></tr>'); 
     $('#myTable').append('<tr>'); 
     $('#myTable').append('<td>Scenario</td>'); 
     $('#myTable').append('<td>Average</td>'); 
     $('#myTable').append('<td>Count</td>'); 
     $('#myTable').append('<td>Max</td>'); 
     $('#myTable').append('</tr>'); 

     for (var j = 0; j < data[i].scenarios.length; j++) { 
      $('#myTable').append('<tr>'); 
      $('#myTable').append('<td>' + data[i].scenarios[j].name + '</td>'); 
      $('#myTable').append('<td>' + data[i].scenarios[j].Avg + '</td>'); 
      $('#myTable').append('<td>' + data[i].scenarios[j].Count + '</td>'); 
      $('#myTable').append('<td>' + data[i].scenarios[j].Max + '</td>'); 
      $('#myTable').append('</tr>'); 
     } 
    } 
})(dataSet); 

. 이를 수행 할 라이브러리와 플러그인이있을 것입니다. 빠른 수정이 필요한 경우,이를 볼 수 있습니다. JavaScript로 시작하고 언젠가는 전문가가되기를 원한다면 먼저 객체를 반복하고 탐색하는 것이 가장 좋습니다.

이 모든 작업을 수행하려면 코드에서 test.json 파일을 사용할 수 있어야합니다. 당신은 아마 내가이 글을 읽는 게 좋을 것, AJAX 함께 할 것입니다 : 도움이 http://jsfiddle.net/ub587/2/

희망 : https://developer.mozilla.org/en/docs/AJAX

다음은 작업 바이올린입니다.