.json文件爲HTML

Question

我有一個json對象的數組，我需要表示爲一個HTML表格.json文件。 任何人都可以請幫助我如何去做。 的test.json文件具有類似的數據：

[{"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}}] 

我要代表它像一個HTML表：

Date:_______ 

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

Answer 1

這是一個非常普遍的問題和意見（和向下票）是對的，你應該提供更多關於發佈前你已經嘗試過的信息。但我心情愉快，所以...

該數據是一個非常糟糕的循環格式。如果你有能力調整一下，那就這樣做。任何一對多的應該是一個數組（一個日期有很多場景）。任何一對一的應該是同一個對象的屬性（例如場景名稱和平均值）。一旦你的數據是'正確'的格式，你需要一個層次結構的每個級別的嵌套循環。你有兩個級別（日期和場景），所以你會有兩個循環。每個人都會寫一行。

隨後的總體思路是：

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); 

這是使用jQuery元素添加到DOM。將有庫和插件來做到這一點。如果你想快速修復，你可以看看它們。如果你從JavaScript開始，並希望有一天能成爲專家，那麼最好先讓你的頭部循環和遍歷對象。

請注意，要做到所有這些，您必須使test.json文件可用於您的代碼。你可能會做這與AJAX，我建議你閱讀本：https://developer.mozilla.org/en/docs/AJAX

這裏的工作小提琴：http://jsfiddle.net/ub587/2/

希望有所幫助。