如何使用键和值作为列从 json 对象填充数据表答案

【问题标题】：How to populate the datatable from json object with key and value as columns如何使用键和值作为列从 json 对象填充数据表
【发布时间】：2016-07-25 11:23:28
【问题描述】：

通常，为了填充 Jquery 数据表，我们需要将 Json Array（json 对象数组）提供给数据表并将每个字段映射到一列。但是我有一个 json 对象，我想在同一行的下一列中显示一列中的所有键及其关联值。

例如示例 json :-

 {
"first-name": "Tom",
"last-name": "Hanks",
"Designation": "Developer"
 }

输出表：-

             Key          Value

            first-name    Tom
            last-name     Hanks
            Designation  Developer

这些键和值的数量将来可能会有所不同。

一种简单的方法是我可以遍历对象并将其转换为具有两个属性的对象数组并用于填充表。但是我想知道是否有其他直接的方法。

【问题讨论】：

您是否尝试从对象创建所需形式的数组？
我已经提到是否有其他方法可用。我知道这是一种选择

标签： jquery json datatables

【解决方案1】：

这似乎适用于您的示例数据：

var data = {
    "first-name": "Tom",
    "last-name": "Hanks",
    "Designation": "Developer"
};
var table = $('#example').DataTable({
    "columns": [
        {
            "data": "key",
            "title": "Key"
        },
        {
            "data": "value",
            "title": "Value"
        }
    ]
});
for(var key in data) {
    if(data.hasOwnProperty(key)) {
        table.row.add({
            "key": key,
            "value": data[key]
        });
    }
}
table.draw();

可能有一个更优雅的解决方案，但作为一个信封背面的东西，它似乎运作良好 - 可能应该使用我认为的回调来完成。你可以看到它在here 工作。

这是一个使用回调的小得多的方法：

var data = {
    "first-name": "Tom",
    "last-name": "Hanks",
    "Designation": "Developer"
};
var table = $('#example').DataTable({
    "columns": [{
        "data": "key",
        "title": "Key"
    },{
        "data": "value",
        "title": "Value"
    }],
    "initComplete": function() {
        this.api().rows.add(JSON.stringify(data).slice(2, -2).split('","').map((c)=>({
            "key": c.split('":"')[0],
            "value": c.split('":"')[1]
        }))).draw();
    }
});

【讨论】：