javascript - 使用 Javascript 创建包含来自 REST API 调用的数据的表

Question

我需要根据从 REST API 获取的 JSON 数据创建一个表。问题:对于这个特定的应用程序，我无法使用 Angular。

我的问题是:我是否必须在脚本中使用 var table = document.createElement("TABLE"); 并在脚本中创建整个表？或者有更好/优雅的方法来分离代码并在 .html 文件中构建表格？

换句话说，它更类似于 Angular 中的单向数据绑定(bind)。到目前为止，我只使用 Angular 来处理 REST API，但对于这个特定项目，我必须使用 Vanilla。

谢谢。

Answer 1

这在普通 JS 中非常容易实现，只需要几行 - 只需不断附加元素并迭代即可。例如

const input = [
  { foo: 'f', bar: 'b' },
  { foo: 'ff', bar: 'bb' },
  { foo: 'fff', bar: 'bbb' },
  { foo: 'f', bar: 'b' },
];
const table = document.body.appendChild(document.createElement('table'));
const thead = table.appendChild(document.createElement('thead'));
const tr = thead.appendChild(document.createElement('tr'));
const columnTexts = Object.keys(input[0]);
columnTexts.forEach((columnText) => {
  tr.appendChild(document.createElement('td'))
    .textContent = columnText;
});
const tbody = table.appendChild(document.createElement('tbody'));
input.forEach((item) => {
  const tr = tbody.appendChild(document.createElement('tr'));
  const values = Object.values(item);
  values.forEach(value => {
    tr.appendChild(document.createElement('td'))
      .textContent = value;
  });
});