将json数据转换为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.

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

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

数据集是3个项目的比较(显示在数组的comparisonValues索引中)

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>

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.

我遇到的问题是如何做到这一点。我应该在服务器端创建整个表HTML,通过ajax调用传递它,只是将预呈现的HTML数据转储到div中或传递json数据并呈现表客户端。

Any elegant suggestions?

任何优雅的建议?

Thanks in advanced.

先谢谢了。

4 个解决方案

#1

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

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

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.

您希望在Web服务器上浪费多少CPU和网络带宽?生成和发送HTML不仅仅是发送一个紧凑的JSON字符串。
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.

你想在webbrowser上浪费多少CPU和内存?在HTML DOM树中生成表不仅仅是将现成的字符串作为innerHTML插入。
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).

您是否希望Web服务具有可重用性?返回“静态”HTML对每个人都没用。更灵活的格式(如XML或JSON)更有用(将来也适用于您自己)。

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

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

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

更新:假设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"
}]};

and that you have an empty table like this

并且你有一个像这样的空表

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

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

然后你可以使用以下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));
    });
});

#2

dnaluz,

as mentioned by others, there are great libs out there to do thios client side. I'd also take the stance that you'd be best sending the json array to the client and then using the lib to present the data in tabular format.

正如其他人所提到的,那里有很多很好的libs来做thios客户端。我还认为你最好将json数组发送到客户端,然后使用lib以表格格式显示数据。

Altho i mention the use of nice presentation libs to create the table, below is a little function that i use for lightweight quick and dirty table visualizations from a json array:

虽然我提到使用漂亮的表示库来创建表,下面是一个小函数,我用来从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;
}

hope this is useful in some minor way.. jim

希望这在某些方面很有用..吉姆

[edit] - here's a link to a page using a very similar technique: http://www.zachhunter.com/2010/04/json-objects-to-html-table/

[edit] - 这是使用非常类似技术的页面链接:http://www.zachhunter.com/2010/04/json-objects-to-html-table/

#3

Nice thing about sending as JSON is you remove the presentation layer from the data layer. I'd do the table client side - there are libraries and blog tutorials to handle rendering.

关于以JSON发送的好处是从数据层中删除表示层。我会做表客户端 - 有库和博客教程来处理渲染。

If you have the funds, extJS is a rather easy way to get that going too.

如果你有资金,extJS也是一种相当简单的方法。

#4

Welcome to Stack Overflow.

欢迎使用Stack Overflow。

I think either way is OK... I have found it easier to include plenty of markup in the response from the server side, when you're displaying a whole table (or row) at a time. If you're dynamically poking bits of data into a table that's already on the page, you might want to render it on the client side.

我认为无论哪种方式都行......我发现当你一次显示整个表(或行)时,在服务器端的响应中包含大量标记会更容易。如果您将数据位动态地放入页面中已有的表中,则可能需要在客户端进行渲染。

#1