Efficient method for retrieving the values of each cell in a row within an array

Question

Efficient method for retrieving the values of each cell in a row within an array

I've got a standard table here - 6 columns, multiple rows, all filled with data. Right now, my goal is to collect all this table data into an array:

  tableData(0) = "1, Hans, Testperson, Munich, Germany"
  tableData(1) = "2, Petra, Testperson, Hamburg, Germany"

The idea is that the array index indicates the row the data came from, while the values on the right side represent the column values all wrapped up in a string and separated by ,.

As of now, my method looks like this:

function getTableData() {
   var tableRows = document.querySelectorAll("#tableId tr");
   var data = []
   for (var j = 1; j < tableRows.length; j++) {
      var rowColumns = tableRows [j].querySelectorAll("td")
      var columnData = ""
      for (var k = 1; k < rowColumns.length; k++) {
         columnData = columnData + rowColumns[k].innerText
         if (k < rowColumns.length-1) {columnData = columnData + ","}
      }
      data.push(columnData)
   }
 }

It's doing the job well, but when the table exceeds 1000 rows, it starts to slow down. Is there a more efficient way to achieve this using only pure JS?

Thank you in advance

javascript arrays

Answer 1

Answer №1

Utilize the table element API to easily access rows and cells without the need for nested queries.

You can either use the map function to concatenate the cell inner texts:

const tableBody = document.getElementById('tableId');

const data = [];
for (const row of tableBody.rows) {
  data.push([...row.cells].map((c) => c.innerText).join(', '));
}

console.log(data);

<table id="tableId">
    <thead>
        <tr><td>id</td><td>first</td><td>last</td><td>city</td><td>country</td></tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>Petra</td><td>Müller</td><td>Hamburg</td><td>Germany</td></tr>
        <tr><td>2</td><td>Hans</td><td>Schneider</td><td>Munich</td><td>Germany</td></tr>
        <tr><td>3</td><td>Jan</td><td>Meyer</td><td>Düsseldorf</td><td>Germany</td></tr>
        <tr><td>4</td><td>Tura</td><td>Fischer</td><td>Leipzig</td><td>Germany</td></tr>
    </tbody>
</table>

Alternatively, you can gather the cell inner texts into a single string:

const tableBody = document.getElementById('tableId');

const data = [];
for (const row of tableBody.rows) {
  let rowData = '';
  for (const cell of row.cells){
    rowData += `${cell.innerText}, `;
  }
  data.push(rowData.slice(0,-2));
}

console.log(data);

<table id="tableId">
    <thead>
        <tr><td>id</td><td>first</td><td>last</td><td>city</td><td>country</td></tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>Petra</td><td>Müller</td><td>Hamburg</td><td>Germany</td></tr>
        <tr><td>2</td><td>Hans</td><td>Schneider</td><td>Munich</td><td>Germany</td></tr>
        <tr><td>3</td><td>Jan</td><td>Meyer</td><td>Düsseldorf</td><td>Germany</td></tr>
        <tr><td>4</td><td>Tura</td><td>Fischer</td><td>Leipzig</td><td>Germany</td></tr>
    </tbody>
</table>

Answer 2

Utilize the table element API to easily access rows and cells without the need for nested queries.

You can either use the map function to concatenate the cell inner texts:

const tableBody = document.getElementById('tableId');

const data = [];
for (const row of tableBody.rows) {
  data.push([...row.cells].map((c) => c.innerText).join(', '));
}

console.log(data);

<table id="tableId">
    <thead>
        <tr><td>id</td><td>first</td><td>last</td><td>city</td><td>country</td></tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>Petra</td><td>Müller</td><td>Hamburg</td><td>Germany</td></tr>
        <tr><td>2</td><td>Hans</td><td>Schneider</td><td>Munich</td><td>Germany</td></tr>
        <tr><td>3</td><td>Jan</td><td>Meyer</td><td>Düsseldorf</td><td>Germany</td></tr>
        <tr><td>4</td><td>Tura</td><td>Fischer</td><td>Leipzig</td><td>Germany</td></tr>
    </tbody>
</table>

Alternatively, you can gather the cell inner texts into a single string:

const tableBody = document.getElementById('tableId');

const data = [];
for (const row of tableBody.rows) {
  let rowData = '';
  for (const cell of row.cells){
    rowData += `${cell.innerText}, `;
  }
  data.push(rowData.slice(0,-2));
}

console.log(data);

<table id="tableId">
    <thead>
        <tr><td>id</td><td>first</td><td>last</td><td>city</td><td>country</td></tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>Petra</td><td>Müller</td><td>Hamburg</td><td>Germany</td></tr>
        <tr><td>2</td><td>Hans</td><td>Schneider</td><td>Munich</td><td>Germany</td></tr>
        <tr><td>3</td><td>Jan</td><td>Meyer</td><td>Düsseldorf</td><td>Germany</td></tr>
        <tr><td>4</td><td>Tura</td><td>Fischer</td><td>Leipzig</td><td>Germany</td></tr>
    </tbody>
</table>

Answer 3

Answer №2

To optimize the column loop in retrieving table data, it would be more efficient to utilize map and join methods instead of continuously adding to a string:

function fetchTableData() {
  var rows = document.querySelectorAll("#tableId tr");
  var data = [];
  for (var k = 1; k < rows.length; k++) {
    data.push([...rows[k].querySelectorAll("td")].map((item) => item.innerText).join(","));
  }
}

Answer 4

To optimize the column loop in retrieving table data, it would be more efficient to utilize map and join methods instead of continuously adding to a string:

function fetchTableData() {
  var rows = document.querySelectorAll("#tableId tr");
  var data = [];
  for (var k = 1; k < rows.length; k++) {
    data.push([...rows[k].querySelectorAll("td")].map((item) => item.innerText).join(","));
  }
}

Efficient method for retrieving the values of each cell in a row within an array

Answer №1

Answer №2

Similar questions

Leveraging the Google Geocode API through HTTP GET requests

No longer will popups be blocked

Hover and focus effects of the main navigation menu in Semantic UI CSS

What is the process for creating an xpath for hyperlinks with the 'contains text' attribute?

Creating arrays from an array list in PHP: A step-by-step guide

What is the best way to fetch a UniqueID using document.getElementById()?

Navigating from the Login Page to the Dashboard in Vue.js following successful token validation

Looking to update the display of an array received in JSON format and then show it using ng-repeat?

Addressing an error of "call stack full" in nextjs

Parse a string containing a selection of markdown by using regular expressions for tokenization

What is the best method for connecting my HTML to jQuery code?

`Why won't the checkbox uncheck when the dropdown is changed in jQuery?`

Generating separators in every third row using an array of card elements

Guide on displaying JSON information upon clicking using JavaScript

Comparing document.getElementById and the jQuery $() function

Having issues with the functionality of Bootstrap 4 popover?

Utilizing Stripe for Payment Processing

Why is the parameter value becoming null during an Ajax call?

How to Retrieve Content from an iFrame Using jQuery?

Retrieving text content from a file using React