Как создать строку заголовка таблицы ключей в объектах?

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

Предполагая, что все объекты в массиве будут иметь одинаковую структуру, это может быть достигнуто путем доступа к первому элементу в массиве и использования его ключей для построения заголовка таблицы.

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)
  

Answer 2

Краткий ответ: 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>