Change HTML table information into an array with the help of JavaScript

Question

Change HTML table information into an array with the help of JavaScript

I am facing an issue where the array is displaying as undefined even though I am storing table data in an array. Check out more about arrays here.

Attempting to retrieve each problem's row in the form of an array

function getAllProblemRowElements() {
    //var k = document.querySelector("#app > div > div > div > div.table-responsive > table > tbody");
    const tableContents = document.querySelector("#app > div > div > div > div.table-responsive > table > tbody");
    const sources = Array.from(tableContents,source=>tableContents[0]);
    return sources;
}

Please help me resolve this issue

javascript

Answer 1

Answer №1

Converting Table Content to Array in JavaScript

var tableData = Array.prototype.map.call(document.querySelectorAll('#myTable tr'), function(row){
  return Array.prototype.map.call(row.querySelectorAll('td'), function(td){
    return td.innerHTML;
    });
  });

console.log(tableData)

<table id="myTable">
<tr>
  <td>1</td>
  <td>a</td>
</tr>
<tr>
  <td>2</td>
  <td>b</td>
</tr>
<tr>
  <td>3</td>
  <td>c</td>
</tr>
</table>

Answer 2

Converting Table Content to Array in JavaScript

var tableData = Array.prototype.map.call(document.querySelectorAll('#myTable tr'), function(row){
  return Array.prototype.map.call(row.querySelectorAll('td'), function(td){
    return td.innerHTML;
    });
  });

console.log(tableData)

<table id="myTable">
<tr>
  <td>1</td>
  <td>a</td>
</tr>
<tr>
  <td>2</td>
  <td>b</td>
</tr>
<tr>
  <td>3</td>
  <td>c</td>
</tr>
</table>

Answer 3

Answer №2

Check out this updated ES6 code snippet:

const tableData = [...document.querySelectorAll('#myTable tr')]
  .map(row => [...row.querySelectorAll('td')]
    .map(cell => cell.textContent));

console.log(tableData)

<table>
  <tbody id="myTable">
    <tr>
      <td>1</td>
      <td>a</td>
    </tr>
    <tr>
      <td>2</td>
      <td>b</td>
    </tr>
    <tr>
      <td>3</td>
      <td>c</td>
    </tr>
  </tbody>
</table>

Answer 4

Check out this updated ES6 code snippet:

const tableData = [...document.querySelectorAll('#myTable tr')]
  .map(row => [...row.querySelectorAll('td')]
    .map(cell => cell.textContent));

console.log(tableData)

<table>
  <tbody id="myTable">
    <tr>
      <td>1</td>
      <td>a</td>
    </tr>
    <tr>
      <td>2</td>
      <td>b</td>
    </tr>
    <tr>
      <td>3</td>
      <td>c</td>
    </tr>
  </tbody>
</table>

Answer 5

Answer №3

It seems like the row causing trouble in your query is the title. To address this issue, you can utilize the querySelectorAll method within the context of the document object to retrieve all rows and then convert them into an array. The code snippet below demonstrates how this can be achieved:

function findProblemRows() {
    const tableRows = document.querySelectorAll("#app > div > div > div > div.table-responsive > table > tbody > tr");
    const problemSources = Array.from(tableRows, source=>source.children[2].getAttribute("value"))
    return problemSources;
}

Answer 6

It seems like the row causing trouble in your query is the title. To address this issue, you can utilize the querySelectorAll method within the context of the document object to retrieve all rows and then convert them into an array. The code snippet below demonstrates how this can be achieved:

function findProblemRows() {
    const tableRows = document.querySelectorAll("#app > div > div > div > div.table-responsive > table > tbody > tr");
    const problemSources = Array.from(tableRows, source=>source.children[2].getAttribute("value"))
    return problemSources;
}

Change HTML table information into an array with the help of JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

highlight the selected option in the ng-repeat list of items

Having trouble viewing the header in devtools for $http requests?

Showing a coordinated timer countdown alongside automatic server-side logout

Error: Failed to retrieve the name property of an undefined value within the Array.forEach method

List of Nodes with five links

Received undefined instead of a Promise or value from the function in Nodemailer

The installation of package.json is unsuccessful, as it will only proceed with an empty name and version

Exploring Ways to Navigate to a Component Two Steps Back in Angular

Ways to access a particular property of a child component object from the parent component

Enhance efficiency with Bootstrap typeahead prefetch capability

Struggling with the navbar-toggler in Bootstrap 4 Beta 2?

What causes the jQuery mouseenter events to be activated in a random sequence?

Unable to display Polygon using ReactNativeMaps

Exploring connections between various objects using JavaScript

Subtracting Arrays Containing Duplicates

React Js month picker problem encountered

How to pass a method from a child component to a parent component in Vue.js

Verify the form data before triggering the ajax call with just one click

The button's size shrinks significantly when there is no content inside

How to iterate through properties declared in an Interface in Angular 12?