如何从动态JSON输出创建一个完全动态的表 - How can I create a fully dynamic table from dynamic JSON output?

How can I create a fully dynamic table from dynamic JSON output?

本文关键字：动态一个 JSON 输出创建 | 更新日期: 2023-09-27

我需要能够从输出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对象，尽管它用于自定义工作。我想知道的是如何读取键和值对，这样我就可以基于它们构建一个表（或其他格式）。

例如

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

并尝试

这可以通过使用$.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