如何從動態JSON輸出創建完全動態的表格？

我需要能夠通過輸出JSON對象的函數動態創建JSON來創建HTML表格。但是，我不知道鍵和值是什麼，因此我無法創建表頭和單元格，直到獲取數據。作爲一個例子，這是輸出的JSON的功能 - 來解釋爲什麼我不知道鍵和值：如何從動態JSON輸出創建完全動態的表格？

header('Content-type: application/json'); 

    echo "{"; 
    echo '"aaData" : ['; 
    for ($i = 0; $i < $ContentCount; $i++) 
    { 
     echo '{ '; 
     for ($j = 0; $j < $HeadCount; $j++) 
     { 

      echo '"' .$Headers[$j][name] .'" : "' . $Content[$i][$Headers[$j][name]] . '"'; 
      if ($j != $HeadCount - 1) { echo ","; } 

     } 
     echo ' }'; 
     if ($i != $ContentCount - 1) { echo ","; } 
    } 
    echo "] }";

這個函數創建格式化數據表一個有效的JSON對象，儘管它被用於定製工作。我想知道的是如何讀取鍵和值對，以便我可以建立一個基於它們的表格（或其他格式）。

來源

2014-04-24 Merlin

例如

var dimensions = [{ width: 11, height: 15, length: 20 },{ width: 12, height: 15, length: 20 },{ width: 13, height: 15, length: 20 }]; 

var keys = $.map(dimensions[0], function(value, key) { 
    return key; 
}); 
$('#DynTbl').append('<table id="dt" border=1><tr id="dth"></tr></table>'); 

$.each(keys, function(key,value) { 
    $('#dth').append('<th>'+value+'</th>'); 
}); 


$.each(dimensions, function(index,data) { 

$('#dt').append('<tr id="t'+index+'"></tr>'); 

var values = $.map(data, function(value, key) { 
    return value; 
}); 

$.each(values, function(key,value) { 
    $('#t'+index).append('<td>'+value+'</td>'); 
}); 
});

檢查在http://jsfiddle.net/rajumjib/cA5LW/4/ 變化

var dimensions = [{ width: 11, height: 15, length: 20 },{ width: 12, height: 15, length: 20 },{ width: 13, height: 15, length: 20 }];

並嘗試

來源

2014-04-24 17:08:27

這實際上做得很完美！我不得不稍微調整一下它的功能，但這與我的系統配對。 – Merlin

這可以通過使用$ .map來實現。

示例：將原始對象映射到新數組並將每個值加倍。

var dimensions = { width: 10, height: 15, length: 20 }; 
dimensions = $.map(dimensions, function(value, index) { 
    return value * 2; 
});

結果：

[ 20, 30, 40 ]

示例：地圖對象的鍵陣列。

var dimensions = { width: 10, height: 15, length: 20 }; 
var keys = $.map(dimensions, function(value, key) { 
    return key; 
});

結果：

[ "width", "height", "length" ]

更多的https://api.jquery.com/jQuery.map

來源

2014-04-24 16:24:52

如何從動態JSON輸出創建完全動態的表格？

回答

相關問題