JSFiddle - React, Tailwind, and code Playground

by mesak

HTML

<table border=1>
  <thead>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  </tbody>
</table>

JavaScript

let headData = Array.from(document.querySelector('thead > tr').cells).map(n=>n.innerText)
console.log('headData', headData )

let tableObject = []
for(let trNode of document.querySelectorAll('tbody > tr') ){
  let data = {};
  Array.from(trNode.querySelectorAll('td')).forEach((n , index)=>{
    data[ headData[index] ] = n.innerText
  })
  tableObject.push(data)
}
console.log( 'tableObject ',tableObject )