grammar fixes, fam!

Link

edited May 22, 2020 at 21:44

Stephen Rauch

4.3k
12
24
36

Javascript - Is this a good approach to extractExtract data from html table

grammar fixes, fam!

Source Link

edit approved May 22, 2020 at 21:44

user177966

I want to extract the headers data and column data (not row data) from htmlan HTML table using javascriptJavaScript. Is

Is this a good approach of doing it?

and And how can iI simplify this using jqueryjQuery?

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>

I want to extract the headers data and column data (not row data) from 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>

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>

added 19 characters in body

Source Link

edited May 20, 2020 at 22:05

M A Salman

123
1
6

I want to extract the headers data and column data (not row data) from 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>

I want to extract the headers data and column data from 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>

I want to extract the headers data and column data (not row data) from 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>

Source Link

asked May 20, 2020 at 20:02

M A Salman

123
1
6

Loading

Stack Exchange Network

Return to Question

Javascript - Is this a good approach to extractExtract data from html table