Javascript - Extract data from html table

Question

I want to extract the headers data and column data (not row data) from an HTML table using JavaScript.

Is this a good approach of doing it? And how can I simplify this using jQuery?

let table = document.getElementById('tab')
debugger
let headers = Array.from(table.rows[0].cells).map(x => x.innerText)
let columnData = 
Array.from(table.rows).
      slice(1, table.rows.length).
      map(row =>Array.from(row.cells).map(x => x.innerText))
     .reduce((acc,rowData)=>{
           rowData.forEach((value,index)=>{
           acc[index]= acc[index] || [ ]
           acc[index].push(value) })
      return acc },[])
console.log(headers)
console.log(columnData)

<table id="tab">
  <tr>
    <th>
      Name
    </th>
    <th>
      Age
    </th>
    <th>
      Location
    </th>
  </tr>

  <tr>
    <th>
      Jason
    </th>
    <th>
      22
    </th>
    <th>
      Texas
    </th>
  </tr>
  <tr>
    <th>
      Lawson
    </th>
    <th>
      21
    </th>
    <th>
      Florida
    </th>
  </tr>
  <tr>
    <th>
      Jose
    </th>
    <th>
      25
    </th>
    <th>
      London
    </th>
  </tr>

</table>

Answer 1

Always use const to declare variables - only use let when you must reassign. This keeps code readable, because then a reader of the code doesn't have to constantly keep in mind that a variable might be reassigned later. (If you use let but then don't reassign, it can still be confusing - in professional code, one might think "Why is let being used here? Was this meant to be reassigned in a section of code that was later removed, or something?)

Array.from accepts an optional mapper function as a second parameter. Any time you have:

Array.from(arrayLike).map(mapper)

you may replace it with

Array.from(arrayLike, mapper)

(If all you're doing is converting an array-like object into an array, some prefer spread syntax because it's even more concise: [...arrayLike])

innerText is a weird property introduced by Internet Explorer (outside of web standards originally) that has a number of odd quirks. Unless you're deliberately looking to invoke those quirks, it would be a better idea to use textContent instead to retrieve text from an element.

You can easily distinguish the first tr from the other trs by using the query string #tab tr:first-child or #tab tr:nth-child(n + 2):

const headers = Array.from(
  document.querySelectorAll('#tab tr:first-child th'),
  th => th.textContent.trim()
);
// Make an empty array for every item in headers:
const data = Array.from(headers, () => []);
for (const tr of document.querySelectorAll('#tab tr:nth-child(n + 2)')) {
  [...tr.children].forEach((th, i) => {
    data[i].push(th.textContent.trim());
  });
}
console.log(headers);
console.log(data);

<table id="tab">
  <tr>
    <th>
      Name
    </th>
    <th>
      Age
    </th>
    <th>
      Location
    </th>
  </tr>

  <tr>
    <th>
      Jason
    </th>
    <th>
      22
    </th>
    <th>
      Texas
    </th>
  </tr>
  <tr>
    <th>
      Lawson
    </th>
    <th>
      21
    </th>
    <th>
      Florida
    </th>
  </tr>
  <tr>
    <th>
      Jose
    </th>
    <th>
      25
    </th>
    <th>
      London
    </th>
  </tr>

</table>

That's already quite simple, IMO. I think adding jQuery to the mix would make things unnecessarily more complicated, not less.

I refactored it out, but I don't think it's good idea to use reduce when the accumulator is going to be the same object every time. See: Is reduce bad? by Google devs. If it's always going to be the same object, it'll be a bit easier to read if that object is declared as a standalone variable in the outer scope.

The HTML is a bit weird. A <th> is a table header. It makes sense for the headers to be <th>s, but the table data should probably be <td>s instead.