如何在对象中创建键的表头行

Question

我从服务器获取用户列表作为对象数组，然后我想将此数组转换为 html 表。问题是我不想预先创建表的标题行，我想从对象具有的键中形成它。

    fetch('get_url')
    .then(response => response.json())
    .then(data => { obj = data })
    .catch(error => console.error(error))
    An obj array containing the following objects:
​    
    0: {…}
    age: "19"
    company: "sunplace"
    experience: "10"
    gender: "male"
    lastname: "Parker"
    placeofwork: "Airport"
    specialty: "cleaner"
    username: "Fred"
​
    1: {…}
    age: "18"
    company: "sunplace"
    experience: "10"
    gender: "male"
    lastname: "Branton"
    placeofwork: "Airport"
    specialty: "cleaner"
    username: "Lar"
​
    2: {…}
    age: "20"
    company: "sunplace"
    experience: "3"
    gender: "female"
    lastname: "Kollin"
    placeofwork: "Airport"
    specialty: "cleaner"
    username: "Laral"

Answer 1

简短的回答：Object.keys(myUsers[0])会给你第一个元素的键。

长答案：

const myUsers = [{
    age: "19",
    company: "sunplace",
    experience: "10",
    gender: "male",
    lastname: "Parker",
    placeofwork: "Airport",
    specialty: "cleaner",
    username: "Fred"
},
{
    age: "19",
    company: "sunplace",
    experience: "10",
    gender: "male",
    lastname: "Parker",
    placeofwork: "Airport",
    specialty: "cleaner",
    username: "Fred"
},
{
    age: "19",
    company: "sunplace",
    experience: "10",
    gender: "male",
    lastname: "Parker",
    placeofwork: "Airport",
    specialty: "cleaner",
    username: "Fred"
}];
// EXTRACT VALUE FOR HTML HEADER 
const header = Object.keys(myUsers[0]);  
// CREATE DYNAMIC TABLE.
const table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
let tr = table.insertRow(-1);                   // TABLE ROW.
for (let i = 0; i < header.length; i++) {
    const th = document.createElement("th");      // TABLE HEADER.
    th.innerHTML = header[i];
    tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (let i = 0; i < myUsers.length; i++) {
    tr = table.insertRow(-1);
    for (let j = 0; j < header.length; j++) {
        let tabCell = tr.insertCell(-1);
        tabCell.innerHTML = myUsers[i][header[j]];
    }
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
const divContainer = document.getElementById("showData");
divContainer.innerHTML = "";
divContainer.appendChild(table);

<div id="showData"></div>

Answer 2

假设数组中的所有对象都具有相同的结构，这可以通过访问数组中的第一项并使用其键构造表头来实现。

const data = [
  {
    age: "19",
    company: "sunplace",
    experience: "10",
    gender: "male",
    lastname: "Parker",
    placeofwork: "Airport",
    specialty: "cleaner",
    username: "Fred"
  },
  {
    age: "18",
    company: "sunplace",
    experience: "10",
    gender: "male",
    lastname: "Branton",
    placeofwork: "Airport",
    specialty: "cleaner",
    username: "Lar"
  },
  {
    age: "20",
    company: "sunplace",
    experience: "3",
    gender: "female",
    lastname: "Kollin",
    placeofwork: "Airport",
    specialty: "cleaner",
    username: "Laral"
  }
]
  
  let headers = Object.keys(data[0])
  let thead = document.createElement('thead')
  let row = document.createElement('tr')
  let createCell = text => {
    let th = document.createElement('th')
    text = document.createTextNode(text)
    th.appendChild(text)
    return th
  }
  
  headers.forEach(header => {
    let cell = createCell(header)
    row.appendChild(cell)
  })
  thead.appendChild(row)
  document.body.appendChild(thead)