javascript - 获取 JSON 到 HTML JavaScript 表

Question

我新建了一个类表作为主表列表。问题是如何将此 JSON 数据插入格式如下的 JavaScript HTML 表中:

{
  query: {
    count: 10,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US",
    diagnostics: {},
    ...
  },
  test1: {
    count: 16,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US",
    diagnostics: {},
    ...
  },
  bold: {
    count: 1,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US",
    diagnostics: {},
    ...
  },
  home: {
    count: 1,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US",
    diagnostics: {},
    ...
  },
  .....
}

像这样的表格:

| Name | Count | Time | Language | Diag | 
------------------------------------------------------------- 
| query | 10 | 2015-12-09T17:12:09Z | en-US | 2 | 
| test1 | 16 | 2015-12-09T17:12:09Z | en-US | 2 | .....

Answer 1

这里有一个简短的例子，可以帮助您理解原理，然后根据您的需要进行调整。

const source = {
  query: {
    count: 10,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US"
  },
  test1: {
    count: 16,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US"
  },
  bold: {
    count: 1,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US"
  },
  home: {
    count: 1,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US"
  }
}

const keys = Object.keys(source); // get the names properly
const colNames = Object.keys(source[keys[0]]); // get all column names

// Let's form table and header first
const table = document.createElement('table');
const header = document.createElement('tr');
header.innerHTML = `<th>name</th>`
header.innerHTML += colNames.map(name => `<th>${name}</th>`).join('');
table.appendChild(header);

// Now lets append all the rows
const rows = keys.map((key) => {
  const tr = document.createElement('tr');
  tr.innerHTML = `<td>${key}</td>`
  tr.innerHTML += colNames.map(name => `<td>${source[key][name]}</td>`).join('');
  return tr;
});

rows.forEach(r => table.appendChild(r));

// render
document.body.appendChild(table);

td, th {
  width: 120px;
  border: 1px solid black;
}