JSON数据转换为HTML表 [英] Converting json data to an HTML table

问题描述

我在PHP数据数组，我需要在一个HTML表格中显示此数据。下面是一个例子数据集的样子。

I have an array of data in php and I need to display this data in a HTML table. Here is what an example data set looks like.

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​​指数示出）

The dataset is a comparison of 3 items (shown in the comparisonValues index of the array)

在最后，我需要的行类似于此

In the end I need the row to look similar to this

<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调用，只是倾倒pre-呈现的HTML数据到一个div或通过JSON数据并呈现表客户端。

The problem I am coming across is how to best do this. Should I create the entire table HTML on the server side pass it over an ajax call and just dump pre-rendered HTML data into a div or pass the json data and render the table client side.

任何优雅的建议？

在先进的感谢。

推荐答案

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

That depends. There are several factors to be taken into account:

1. 占用多少CPU和网络带宽，你要浪费在Web服务器？生成和发送HTML吃多只发送一个紧凑的JSON字符串。

1. How much CPU and network bandwidth do you want to waste on the webserver? Generating and sending HTML eats more than just sending a compact JSON string.

占用多少CPU和内存你不想浪费在网页浏览器？在HTML DOM树生成表格吃多只插入一个现成生成的字符串作为的innerHTML 。

How much CPU and memory do you want to waste on the webbrowser? Generating a table in HTML DOM tree eats more than just inserting a ready-generated string as innerHTML.

如何重复使用你想要的web服务呢？返回静态HTML是不是对大家有用。 （为自己的未来也有），如XML或JSON一个更灵活的形式是比较有用。

How reuseable do you want the webservice to be? Returning "static" HTML isn't useful for everyone. A more flexible format like XML or JSON is more useful (also for yourself in the future).

据，我建议返回JSON和有JS / jQuery来填充它在客户端。

As far, I'd suggest returning JSON and have JS/jQuery to populate it on the client side.

更新：假设JSON数据将在本格式到达

Update: assuming that the JSON data will arrive in this format

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脚本来填充它，你在问题中所描述的方式

then you can use the following jQuery script to fill it the way you described in the question

$.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));
    });
});

这篇关于JSON数据转换为HTML表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！