Javascript 将json数据转换为html表

是否有任何jQuery或javascript库可以在给定json数据的情况下生成动态表？ 我不想定义列，库应该读取json哈希中的键并生成列

当然，我可以自己迭代json数据并生成html表。我只是想知道是否存在这样的库，我可以简单地重用。

查看jQuery插件。它允许您指定将JSON对象转换为HTML模板的转换。使用builder on获取任何所需html模板的json转换对象。在您的例子中，它将是一个具有以下转换的行的表

示例：

var transform = {"tag":"table", "children":[
    {"tag":"tbody","children":[
        {"tag":"tr","children":[
            {"tag":"td","html":"${name}"},
            {"tag":"td","html":"${age}"}
        ]}
    ]}
]};

var data = [
    {'name':'Bob','age':40},
    {'name':'Frank','age':15},
    {'name':'Bill','age':65},
    {'name':'Robert','age':24}
];

$('#target_div').html(json2html.transform(data,transform));

---

谢谢大家的回复。请注意，这使用jQuery

代码段：

var myList=[
{“姓名”：“abc”，“年龄”：50}，
{“年龄”：“25岁”，“爱好”：“游泳”}，
{“名称”：“xyz”，“爱好”：“编程”}
];
//用myList构建HTML表。
函数buildHtmlTable（选择器）{
var columns=addAllColumnHeaders（myList，选择器）；
对于（变量i=0；i

---

我已经用vanilla js重写了您的代码，使用DOM方法防止html注入

var\u table\u=document.createElement（'table'），
_tr=document.createElement（'tr'），
_th=document.createElement（'th'），
_td=document.createElement（'td'）；
//从Ivy restful服务的myList json数据构建HTML表。
函数buildHtmlTable（arr）{
变量表=\表\克隆节点（假），
columns=AddAllColumnHeader（arr，表格）；
对于（变量i=0，最大值=arr.length；i]));您可以使用简单的jQuery jPut插件



$（文档）.ready（函数（）{
var json=[{“name”：“name1”，“email”：”email1@domain.com}，{“名称”：“名称2”，“链接”：email2@domain.com"}];
//运行此代码时，模板将在div中附加json数据
$（“#tbody”）.jPut({
jsonData:json，
//ajax_url：“youfile.json”，如果您想从json文件调用
名称：“tbody_模板”，
});
});
{{name}}
{{email}}
我想我应该更新这里的链接，让你需要node-json2html才能在服务器端NodeJSHi@Manish mulani上工作。这对我不起作用，你能检查一下吗again@Nish你检查了吗？嗨，我试图从url获取数据，但似乎不起作用。这个适合我。不过，我有一个问题。为什么没有打开的
tr
和
td
标签？谢谢。
函数addAllColumnHeaders（myList）
-错误。应该是
函数addAllColumnHeaders（myList，selector）
。顺便说一句，这工作完美！！我想这就是你要找的。它接受JSON并将其转换为网格。谢谢您的回复。但为了满足我的要求，我为自己写了一本。你也可以在Github上使用这个简单的项目：在2020年更容易，只需使用嵌套的json对象就可以了吗？@JanacMeena我想你需要n维的表。这是真的。表中的表。此外，我还发现了可缩放的树形图，它允许嵌套的JSON，但返回一个数据透视表beautifull@Shai使用JSON.parse（yourVariable）并将其发送到buldHTMLTable
<script>
$(document).ready(function(){

var json = [{"name": "name1","email":"email1@domain.com"},{"name": "name2","link":"email2@domain.com"}];
//while running this code the template will be appended in your div with json data
$("#tbody").jPut({
    jsonData:json,
    //ajax_url:"youfile.json",  if you want to call from a json file
    name:"tbody_template",
});

});
</script>   

<table jput="t_template">
 <tbody jput="tbody_template">
     <tr>
         <td>{{name}}</td>
         <td>{{email}}</td>
     </tr>
 </tbody>
</table>

<table>
 <tbody id="tbody">
 </tbody>
</table>