如何使用 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"]
    ]
}

我的目标是为两列创建一个具有预定义标题的 HTML 表：

header_title_1
header_title_2

这永远不会改变，表格应该如下所示：

感谢您的帮助！

JavaScript HTML JSON html-table 嵌套列表

const tbody = document.getElementById('table').tBodies[0];
const obj = {"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"]]};

function createTable(obj) {
  tbody.innerHTML = ''; // To reset the table
  
  for (const key in obj) {
    if (!obj.hasOwnProperty(key)) continue;
    const value = Array.isArray(obj[key]) ? obj[key] : [obj[key]];
    const row = document.createElement('tr');
    const key_cell = Object.assign(document.createElement('td'), {
      innerText: key
    });
    const value_column = Object.assign(document.createElement('td'), {
      innerText: value.splice(0, 1)[0]
    });

    row.append(...[key_cell, value_column]);
    tbody.append(row);

    value.forEach(val => {
      const inner_row = document.createElement('tr');
      const empty_key_cell = document.createElement('td');
      const value_cell = Object.assign(document.createElement('td'), {
        innerText: val
      });
      inner_row.append(...[empty_key_cell, value_cell]);
      tbody.append(inner_row);
    });
  }
}

createTable(obj);

<table id="table" border="1" width="100%">
  <thead>
    <td>header_title_1</td>
    <td>header_title_2</td>
  </thead>
  <tbody></tbody>
</table>

const obj=
{"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"]]};
 
document.querySelector("#table tbody").innerHTML=
Object.entries(obj).map(([k,v])=>
   "<tr><td>"+k+"</td><td>"
  +(Array.isArray(v)?v:[[v]]).join("<hr>")
  +"</td></tr>").join("\n")

td>hr {margin:0px}
td {vertical-align:top}

<table id="table" border="1" width="100%">
  <thead>
    <th>header_title_1</th>
    <th>header_title_2</th>
  </thead>
  <tbody></tbody>
</table>

上一个：JSON到HTML转换使用jq

下一个：如何编写可重用的模板，该模板可以遍历所有嵌套数据并在 HTML 中显示嵌套列表

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

How to dynamically create a table from a JSON with nested lists using Javascript?

评论

评论