将 json 数据转换为 HTML 表格

我在 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
),)

数据集是 3 个项目的比较（显示在数组的 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 数据并渲染表客户端。

有什么优雅的建议吗？

那要看。有几个因素需要考虑：

1. 您希望在网络服务器上浪费多少 CPU 和网络带宽？生成和发送 HTML 不仅仅只是发送一个紧凑的 JSON 字符串。

2. 您希望在网络浏览器上浪费多少 CPU 和内存？在 HTML DOM 树中生成表格不仅仅是插入一个已生成的字符串，如下所示innerHTML.

3. 您希望 Web 服务的可重用性如何？返回“静态”HTML 并不对每个人都有用。更灵活的格式（例如 XML 或 JSON）更有用（也对将来的您自己）。

到目前为止，我建议返回 JSON 并使用 JS/jQuery 在客户端填充它。

Update:假设 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));
    });
});