轉換JSON數據到一個HTML表

我有一個數組在PHP中，我需要顯示在HTML表中的這些數據。以下是一個示例數據集的樣子。轉換JSON數據到一個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數據並呈現表客戶端。

任何優雅的建議？

謝謝先進。

來源

2010-06-10 dnaluz

我將在ajax腳本中構建表並加載它。這是最簡單的方法。然後你可以將一個完整的表格插入div或其他東西。 – 2010-06-10 17:34:53

歡迎來到Stack Overflow。

我認爲無論哪種方式都可以......我發現在服務器端的響應中包含大量標記，當您一次顯示整個表格（或行）時，它更容易。如果您動態地將數據位移入頁面中已有的表中，則可能需要在客戶端渲染它。

來源

2010-06-10 18:04:35 Nathan

關於作爲JSON發送的好處是您從數據層中刪除表示層。我會做桌面客戶端 - 有庫和博客教程來處理渲染。

如果你有資金，extJS是一個相當簡單的方法來獲得這一點。

來源

2010-06-10 18:09:05

這取決於。有幾個因素需要考慮：

你想在網絡服務器上浪費多少CPU和網絡帶寬？生成和發送HTML消息不僅僅是發送緊湊的JSON字符串。
你想在網頁瀏覽器上浪費多少CPU和內存？在HTML DOM樹中生成表格不僅僅是插入一個現成的字符串作爲innerHTML。
您希望webservice的重用性如何？返回「靜態」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)); 
    }); 
});

來源

2010-06-10 18:09:51 BalusC

dnaluz，

正如其他人所提到的那樣，在thios客戶端有很好的庫存。我也會採取這樣的立場：你最好將json數組發送到客戶端，然後使用lib以表格格式顯示數據。

本書雖然我提到使用漂亮的演示庫的創建表，下面是一個小功能，我使用的輕量級快速和骯髒的可視化表從一個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; 
}

希望這是有用的一些小的方式.. 吉姆

[編輯] - 這裏是一個使用非常相似的技術到一個頁面的鏈接： http://www.zachhunter.com/2010/04/json-objects-to-html-table/

來源

2010-06-11 10:39:45

轉換JSON數據到一個HTML表

回答

相關問題