How to separate key of json data and use it in table header [ javascript or PHP ]

Question

I have this table and I am doing hardcoded table header but I want it dynamic as per JSON data schema

for example , my JSON data is as below

[
  {
    "adapterid": 44835,
    "rowid": 1573784208932,
    "battery": 3610,
    "createddate": "15-11-2019",
    "gid": "01:f0:50:11:a1:35:87",
    "id": 2277491836402479600,
    "projectid": 32107,
    "rssi": -90,
    "temp": 25.75
  },
  {
    "adapterid": 44835,
    "rowid": 1573784212032,
    "battery": 3660,
    "createddate": "15-11-2019",
    "gid": "01:f0:50:11:a1:35:87",
    "id": 2277491836402479600,
    "projectid": 32107,
    "rssi": -89,
    "temp": 25.75
  },
  {
    "adapterid": 44835,
    "rowid": 1573784215034,
    "battery": 3610,
    "createddate": "15-11-2019",
    "gid": "01:f0:50:11:a1:35:87",
    "id": 2277491836402479600,
    "projectid": 32107,
    "rssi": -96,
    "temp": 25.75
  }
]

I want to generate table header using this JSON data

<thead>
    <th>adapterid</th>
    <th>rowid</th>
    <th>battery</th>
    <th>createddate</th>
    <th>gid</th>
    <th>id</th>
    <th>projectid</th>
    <th>rssi</th>
    <th>temp</th>
</thead>

Answer 1

You can use Object.keys() to get all the keys from an object then loop through them to form the header.

Demo:

 var data = [ { "adapterid": 44835, "rowid": 1573784208932, "battery": 3610, "createddate": "15-11-2019", "gid": "01:f0:50:11:a1:35:87", "id": 2277491836402479600, "projectid": 32107, "rssi": -90, "temp": 25.75 }, { "adapterid": 44835, "rowid": 1573784212032, "battery": 3660, "createddate": "15-11-2019", "gid": "01:f0:50:11:a1:35:87", "id": 2277491836402479600, "projectid": 32107, "rssi": -89, "temp": 25.75 }, { "adapterid": 44835, "rowid": 1573784215034, "battery": 3610, "createddate": "15-11-2019", "gid": "01:f0:50:11:a1:35:87", "id": 2277491836402479600, "projectid": 32107, "rssi": -96, "temp": 25.75 } ] var header = Object.keys(data[0]); var thead = document.querySelector('table thead tr'); header.forEach(function(th){ thead.insertAdjacentHTML('beforeend', `<th>${th}</th>`) })

 th { border: 1px solid #dddddd; text-align: left; padding: 8px; }

 <table> <thead> <tr></tr> </thead> </table>

Answer 2

You need only 2 lines:

let Rowhead = MyTable.createTHead().insertRow(-1)
Object.keys(infoTable[0]).forEach((T,i)=>Rowhead.insertCell(i).textContent=T)

example:

 const infoTable = [ { adapterid: 44835, rowid: 1573784208932, battery: 3610, createddate: "15-11-2019", gid: "01:f0:50:11:a1:35:87", id: 2277491836402479600, projectid: 32107, rssi: -90, temp: 25.75 } , { adapterid: 44835, rowid: 1573784212032, battery: 3660, createddate: "15-11-2019", gid: "01:f0:50:11:a1:35:87", id: 2277491836402479600, projectid: 32107, rssi: -89, temp: 25.75 } , { adapterid: 44835, rowid: 1573784215034, battery: 3610, createddate: "15-11-2019", gid: "01:f0:50:11:a1:35:87", id: 2277491836402479600, projectid: 32107, rssi: -96, temp: 25.75 } ]; const MyTable = document.querySelector('#my-table') , Tcols = Object.keys(infoTable[0]) ; let Rowhead = MyTable.createTHead().insertRow(-1) Tcols.forEach((T,i)=>Rowhead.insertCell(i).textContent=T)

 body { font-size: 16px; font-family: Arial, Helvetica, sans-serif; } Table { border-collapse: collapse; margin: .7em; } td { border: 1px solid grey; padding: 2px 10px; } thead { background-color: turquoise;}

 <table id="my-table"></table>

complete info:

 const infoTable = [ { adapterid: 44835, rowid: 1573784208932, battery: 3610, createddate: "15-11-2019", gid: "01:f0:50:11:a1:35:87", id: 2277491836402479600, projectid: 32107, rssi: -90, temp: 25.75 } , { adapterid: 44835, rowid: 1573784212032, battery: 3660, createddate: "15-11-2019", gid: "01:f0:50:11:a1:35:87", id: 2277491836402479600, projectid: 32107, rssi: -89, temp: 25.75 } , { adapterid: 44835, rowid: 1573784215034, battery: 3610, createddate: "15-11-2019", gid: "01:f0:50:11:a1:35:87", id: 2277491836402479600, projectid: 32107, rssi: -96, temp: 25.75 } ]; const MyTable = document.querySelector('#my-table') , Tcols = Object.keys(infoTable[0]) , nbTcols = Tcols.length ; for(let line of infoTable ) { let nRow = MyTable.insertRow(-1) for (let c=0; c<nbTcols; c++) { if (line[Tcols[c]]) { nRow.insertCell(c).textContent = line[Tcols[c]] } else { nRow.insertCell(c).textContent = '' } // empty cell ? } } let Rowhead = MyTable.createTHead().insertRow(-1) Tcols.forEach((T,i)=>Rowhead.insertCell(i).textContent=T)

 body { font-size: 16px; font-family: Arial, Helvetica, sans-serif; } Table { border-collapse: collapse; margin: .7em; } td { border: 1px solid grey; padding: 2px 10px; } thead { background-color: turquoise;}

 <table id="my-table"></table>