如何使用Javascript从带有嵌套列表的JSON动态创建表？

我正在尝试从JSON文件创建一个HTML表，该表的值可以包括嵌套列表，如下例所示：

    {"entry 1":[
            ["text1","text2","text3"],
            ["text4","text5","text6"],
            ["text7","text8","text9"]
        ],
     "entry 2":"N/A",
     "entry 3":[
            ["text1","text2","text3"],
            ["text4","text5","text6"]
        ],
     "entry 4":[
            ["text1","text2"],
            ["text3","text4"]
        ]
     }

我的目标是为两列“header\u title\u 1”和“header\u title\u 2”创建一个具有预定义标题的HTML表，这两列永远不会更改，该表应如下所示：

---

谢谢你的帮助

在对象上使用

for…in

迭代器获取

键

。我为每个属性创建了一行，然后为键和值创建了一个单元格。然后，如果该值不是数组，比如

entry2

键，我们将其设置为一个数组来遍历元素

为数组中的每个元素创建新行，并为数组中的项目创建新单元格。如果它是一个数组，则该值将转换为一个由逗号“，”分隔的字符串，或者按原样设置

然后我们将元素附加到表的主体中

const tbody=document.getElementById（'table'）.tBodies[0]；
const obj={“条目1”：[“text1”、“text2”、“text3”]、[“text4”、“text5”、“text6”]、[“text7”、“text8”、“text9”]、“条目2”：“不适用”、“条目3”：[“text1”、“text2”、“text3”]、[“text4”、“text5”、“text6”]、“条目4”：[“text1”、“text2”]、[“text3”、“text4”]；
函数createTable（obj）{
tbody.innerHTML=''；//重置表
用于（obj中的常量键）{
如果（！obj.hasOwnProperty（key））继续；
const value=Array.isArray（obj[key]）？obj[key]：[obj[key]；
const row=document.createElement（'tr'）；
const key_cell=Object.assign（document.createElement（'td'）{
innerText:键
});
const value_column=Object.assign（document.createElement（'td'）{
innerText:value.splice（0,1）[0]
});
追加（…[关键字单元格，值列]）；
tbody.append（行）；
value.forEach（val=>{
const internal_row=document.createElement（'tr'）；
const empty_key_cell=document.createElement（'td'）；
const value_cell=Object.assign（document.createElement（'td'）{
内部文本：val
});
内部_行。追加（…[空的_键_单元格，值_单元格]）；
tbody.append（内行）；
});
}
}
创建表（obj）

标题1
标题2
或者，简单地说，您可以执行以下操作：


const对象=
{“条目1”：[[“text1”、“text2”、“text3”]、[“text4”、“text5”、“text6”]、[“text7”、“text8”、“text9”]，
“条目2”：“不适用”，
“条目3”：[“text1”、“text2”、“text3”]、[“text4”、“text5”、“text6”]，
“条目4”：[[“text1”、“text2”]、[“text3”、“text4”]}；
document.querySelector（“#table tbody”）.innerHTML=
Object.entries（obj.map）（[k，v]）=>
“+k+”
+（Array.isArray（v）？v:[[v]]）。加入（“
”）
+“”）。加入（“\n”）
td>hr{margin:0px}
td{垂直对齐：顶部}

标题1
标题2
堆栈溢出不是免费的代码编写服务；到目前为止你试过什么了吗？
Object.keys（obj）
提供了可以迭代以获得所需的表htmltanks的键很多，它工作得非常好！如果我想在每行之间添加一条水平线，这应该添加到JS脚本还是html中？如果你指的是链接图片中的样子，我已经为此编辑了我的代码…这就是你的意思吗？最后一个问题，我的页面从筛选按钮开始，在创建表之前选择要加载的JSON文件，您的脚本是否应该在某个地方包含一个“id=table”以使其成为动态的？第一个表加载得很好，但当我尝试按btton加载另一个JSON时，控制台中会出现以下错误消息：“由于目标被视为被动，无法在被动事件侦听器中防止默认值”