How to create a table header row of keys in objects?

Question

I get a list of users from the server as an array of objects, then I want to turn this array into an html table. The problem is that I do not want to pre-create the header row of the table, I would like to form it from the keys that the objects have.

    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"

See also: https://stackoverflow.com/questions/5180382/convert-json-data-to-a-html-table — filipe, Jun 11 '19 at 21:40

filipe · Accepted Answer · 2019-06-11T22:14:33.770

Short answer: Object.keys(myUsers[0]) will give you the keys for the first element.

Long answer:

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>

score 0 · Answer 2 · answered Jun 11 '19 at 21:55

Assuming all objects in the array will have the same structure, this can be achieved by accessing the first item in the array and using its keys to construct the table header.

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)

How to create a table header row of keys in objects?

2 Answers2