将JSON数据转换为HTML表格

Question

我有一个 PHP 数组数据，需要在 HTML 表格中展示。以下是一个数据集的示例：

Array(
  Array
  (
     [comparisonFeatureId] => 1182
     [comparisonFeatureType] => Category
     [comparisonValues] => Array
                 (
                 [0] => Not Available
                 [1] => Standard
                 [2] => Not Available
                 [3] => Not Available
                 )
    [featureDescription] => Rear Seat Heat Ducts
),)

这个数据集是对三个项目进行比较的（在数组的comparisonValues索引中显示）。

最终我需要的行应该类似于这个样子。

<tr class="alt2 section_1"> 
   <td><strong>$record['featureDescription']</strong></td> 
   <td>$record['comparisonValues'][0]</td> 
   <td>$record['comparisonValues'][1]</td> 
   <td>$record['comparisonValues'][2]</td> 
   <td>$record['comparisonValues'][3]</td> 
</tr>   

我遇到的问题是如何更好地完成这个任务。我应该在服务器端创建整个HTML表格，通过ajax调用将预渲染的HTML数据直接插入一个div中，还是传递json数据并在客户端渲染表格呢？

有什么优雅的建议吗？

- dnaluz

---

我会在ajax脚本中构建表格，然后将其加载。这是最简单的方法。然后您可以将完整形式的表格注入到div或任何其他位置。 - David Yell

Answer 1

这要看情况。有几个因素需要考虑：

1. 你希望在web服务器上浪费多少CPU和网络带宽？生成和发送HTML比仅发送紧凑的JSON字符串更耗费资源。

2. 你希望在web浏览器上浪费多少CPU和内存？在HTML DOM树中生成表格比仅插入已生成的字符串作为 innerHTML 更耗费资源。

3. 你希望Web服务有多可重用？返回“静态”HTML对于每个人都没有用。像XML或JSON这样更灵活的格式更有用（也适用于将来）。

因此，我建议返回JSON，并在客户端使用JS/jQuery填充数据。

---

更新：假设JSON数据以这种格式到达

var json = {"features": [{
    "comparisonFeatureId": 1182,
    "comparisonFeatureType": "Category",
    "comparisonValues": [ "Not Available", "Standard", "Not Available", "Not Available" ],
    "featureDescription": "Rear Seat Heat Ducts"
}, {
    "comparisonFeatureId": 1183,
    "comparisonFeatureType": "Category",
    "comparisonValues": [ "Not Available", "Standard", "Not Available", "Not Available" ],
    "featureDescription": "Some Description"
}]};

而且您需要一个像这样的空表。

<table id="table"></table>

然后您可以使用以下 jQuery 脚本按照您在问题中描述的方式填充它。

$.each(json.features, function(i, feature) {
    var row = $('<tr class="alt2 section_1">').appendTo($('#table'));
    row.append($('<td>').append($('<strong>').text(feature.featureDescription)));
    $.each(feature.comparisonValues, function(j, comparisonValue) {
        row.append($('<td>').text(comparisonValue));
    });
});

- BalusC

Answer 2

dnaluz，

正如其他人所提到的，有很多优秀的库可以在客户端完成这项工作。我认为最好将JSON数组发送到客户端，然后使用库以表格形式呈现数据。

虽然我提到了使用漂亮的表格展示库来创建表格，但下面是一个我用于快速轻便的JSON数组可视化的小函数：

function CreateTableFromJson(objArray) {
    // has passed in array has already been deserialized
    var array = typeof  objArray != 'object' ? JSON.parse(objArray) : objArray;

    str = '<table class="tableNormal">';
    str += '<tr>';
    for (var index in array[0]) {
        str += '<th scope="col">' + index + '</th>';
    }
    str += '</tr>';
    str += '<tbody>';
    for (var i = 0; i < array.length; i++) {
        str += (i % 2 == 0) ? '<tr class="alt">' : '<tr>';
        for (var index in array[i]) {
            str += '<td>' + array[i][index] + '</td>';
        }
        str += '</tr>';
    }
    str += '</tbody>'
    str += '</table>';
    return str;
}

希望这在某些小方面有所帮助。 jim

【编辑】- 这里是一个使用非常类似技术的页面链接： http://www.zachhunter.com/2010/04/json-objects-to-html-table/

- jim tollan

Answer 3

发送JSON的好处在于将表示层从数据层中分离出来。我会在客户端处理表格 - 有一些库和博客教程可以处理渲染。

如果你有资金，extJS是一个相当简单的方法来实现这个目标。

- Mike Robinson

Answer 4

欢迎来到Stack Overflow。

我认为两种方式都可以...当您一次显示整个表格（或行）时，我发现从服务器端在响应中包含大量标记更容易。 如果您要将数据位动态地插入到已经在页面上的表格中，则可能需要在客户端上呈现它。

- Nathan