如何从动态JSON输出创建完全动态的表？

Question

我需要能够通过输出JSON对象的函数动态创建的JSON构建HTML表。 但是，我不知道键和值是什么预先准备的，因此，在获取数据之前，无法创建表头和单元格。 例如，这是输出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 "] }";

尽管此函数用于自定义工作，但它会创建一个为DataTables格式化的有效JSON对象。 我想知道的是如何读取键和值对，以便可以基于它们建立表（或其他格式）。

Answer 1

这可以通过使用$ .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上了解更多

Answer 2

例如

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 }];

并尝试