在JavaScript中从JSON对象创建表格

Question

我正在尝试创建一个HTML表格，其中包含我用来绘制图表的信息。 我不想两次查询数据库，并且想要使用这些信息创建图表和表格。 这是从服务器获取到并被绘制成图表的内容：

var data = {
              "selector":"#charttotalday",
              "jsondata":[
                 {
                    "label":"Client1",
                    "data":[
                            [1382670000000,110157],
                            [1382756400000,199055],
                            [1382842800000,362996],
                            [1382929200000,302],
                            [1383015600000,169],
                            [1383102000000,88],
                            [1383188400000,49]
                            ],
                    "points":{
                       "fillColor":"#88bbc8"
                    }
                 },
                 {
                    "label":"Client2",
                    "data":[
                            [1382670000000,58611],
                            [1382756400000,112268],
                            [1382842800000,193060],
                            [1382929200000,115],
                            [1383015600000,45],
                            [1383102000000,65],
                            [1383188400000,18]
                            ],
                    "points":{
                       "fillColor":"#ed7a53"
                    }
                 },
                 {
                    "label":"Client3",
                    "data":[
                            [1382670000000,65534],
                            [1382756400000,118362],
                            [1382842800000,200058],
                            [1382929200000,123],
                            [1383015600000,65],
                            [1383102000000,53],
                            [1383188400000,26]
                    ],
                    "points":{
                       "fillColor":"#9FC569"
                    }
                 }
              ]
           };

由于信息的组织方式，我无法使用$.each循环遍历信息并创建以下格式的表格：

                Client1  Client2  Client3
1382670000000 |  10157 |  58611 |  65534 | 
1382756400000 |  99055 |  12268 |  18362 |
1382842800000 |  62996 |  93060 |  10058 |
1382929200000 |    302 |    115 |    123 |
1383015600000 |    169 |     45 |     65 |
1383102000000 |     88 |     65 |     53 |
1383188400000 |     49 |     18 |     26 |

我认为最好的方法是读取对象并创建一个具有所需结构的新对象，这样可以与$.each一起使用。

我已经尝试过以下方法：

$.each(data.jsondata, function(key, value) {
    thead += '<th>' + value.label + '</th>';
    tableData[value.label] = new Object();
    $.each(value.data, function(key1, value1) {
        $.each(value1, function(key2, value2) {
            if(key2 == 0) {
                //here I have the time line, axis Y
                index = value2;
            }
            if(key2 == 1) {
                //here I have the values for the table
                tableData[value.label][index] = value2;
            }
        });
    });
});

thead += '</tr>';

但是这只创造了一个更简单的元素，带有我需要的信息，但仍然不能变成我需要的东西。请问有人可以指点我正确的方向吗？

- Don Viegues

---

不是很清楚你在问什么，请更具体一些。同时建议你在jsfiddle.net上创建一个演示。 - charlietfl

为什么你不想在使用$.each之前将data.json数据转换成适当的结构数组？ - jonasnas

@charlietfl：我已经按照flot所需的格式对数据进行了格式化，但它并没有被适当地组织以便于轻松创建表格。 - Don Viegues

@jonasnas: 我该怎么做？我想做这件事，但我不知道怎么做。谢谢。 - Don Viegues

Answer 1

这将把您的数据映射到表格中：

 var headers=[ ""], rows={}
  $.each(data.jsondata,function(clientIdx,item){
      headers.push(item.label );
      $.each( item.data,function(i,arr){
        if( !rows[arr[0]]){
         rows[arr[0]]=[];
        }
        rows[arr[0]][clientIdx]=arr[1];
      })
  })


  var rowHtml='<tr><th>'+headers.join('</th><th>')+'</th></tr>';
  $.each(rows,function(key, arr){
    rowHtml+='<tr><td>'+key+'</td>';
    rowHtml +='<td>'+arr.join('</td><td>')+'</td></tr>';

  })

  $('#table').html(rowHtml);

DEMO

- charlietfl

---

唯一的问题是如果每个日期没有为每个客户输入条目...我还没有测试过这种情况，基本上该行的数组将包含其中的空元素。我认为仍然会正确地组织真实日期。 - charlietfl

是的，你说得对。我唯一看到的解决方案就是循环遍历所有日期并创建一个完整的列表，然后将其用作索引。我不认为我可以在SQL查询期间完成它。 - Don Viegues

在我的演示中，它们向左移动是因为缺少 TD，在左侧有任何空白吗？我的只有右侧。再次感谢。 - Don Viegues

你用的是什么浏览器？我只在Firefox和Chrome中查看了它。 - charlietfl

我会玩几分钟。 - charlietfl