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

Question

我正在尝试从 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

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

感谢您的帮助!

Answer 1

在对象上使用for...in迭代器来获取key。我为每个属性创建了一行，然后为键和值创建了一个单元格。然后，如果该值不是数组(例如 entry2 键)，我们会将其设为数组以迭代元素。

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

然后我们将元素附加到表格主体。

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>