Question

我需要从REST API创建一个来自JSON数据的表。问题：对于这个特定的应用程序，我不能使用Angular。

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

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

感谢。

Answer 1

在vanilla 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;
  });
});

使用Javascript创建一个包含REST API调用数据的表

1 个答案: