-3

我在 .json 文件中有一组 json 对象，我需要将其表示为 HTML 表。谁能帮我解决一下。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 |
|         |           |       |           |
|         |           |       |           |
|         |           |       |           |
4

1 回答 1

0

这是一个非常普遍的问题，评论（和否决票）是正确的，您应该在发布之前提供有关您尝试过的内容的更多信息。但是我心情很愉快，所以...

该数据的循环格式非常糟糕。如果你有能力稍微调整一下，那就去做吧。任何一对多的都应该是一个数组（一个日期有很多场景）。任何一对一的东西都应该是同一对象的属性（例如场景名称和平均值）。一旦您的数据采用“正确”格式，您就需要为层次结构的每个级别创建一个嵌套循环。您有两个级别（日期和场景），因此您将有两个循环。每个人都会写一行。

那么一般的想法是：

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/

希望有帮助。

于 2013-07-29T22:22:36.263 回答