CODEWITHSUNDEEP
javascripthtml
e.iluf
e.iluf

Reputation: 1659

Iterating through html array is not working in javascript

I tried iterating through this but could not. the function below function orderpackage (){

var product_line = $('#carttable')[0].getElementsByTagName('tr');

for (var i = 1; i < product_line.length; i++) {
}

console.log(product_line)

Produces this in the console output

enter image description here

each of the tr.table_row is made from this 

<tr class="table_row">
  <td class="column-1">
    <div class="how-itemcart1">
      <img src=${Items.imageurl} alt="IMG">
    </div>
  </td>
  <td class="column-2">${Items.name}</td>
  <td class="column-3">$ ${Items.price}</td>
  <td class="column-4">
    <div class="wrap-num-product flex-w m-l-auto m-r-0">
      <div class="btn-num-product-down cl8 hov-btn3 trans-04 flex-c-m qty-change" id="qty-change">
        <i class="fs-16 zmdi zmdi-minus"></i>
      </div>

      <input class="mtext-104 cl3 txt-center num-product" type="number" name="num-product1" value=${Items.user_quantity}>

      <div class="btn-num-product-up cl8 hov-btn3 trans-04 flex-c-m qty-change" id="qty-change">
        <i class="fs-16 zmdi zmdi-plus"></i>
      </div>
    </div>
  </td>
  <td class="column-5">${line_total_sum}</td>
</tr>

what I want to do is iterate through each and get the price, quantity and line total. When I tried the function below for the line total is shows error

var product_line = $('#carttable')[0].getElementsByTagName('tr')[4];

How do I iterate through each tr to the price, quantity and line total?

Upvotes: 2

Views: 80

Answers (1)

Danziger
Danziger

Reputation: 21181

With plain JS, you can use HTMLTableElement.rows to get all the rows on the table.

Then you need to iterate over them, probably skipping the first one (header). For each one, access the children (cells) that contain the fields you need and create a new array with them, [price, quantity, total], and push that one to another array containing the data for all the table.

Here's one way to do it using Array.from() and Array.prototype.map():

const tableData = Array.from(document.getElementById('table').rows).slice(1).map(row => {
  const cells = row.children;
  
  return [cells[0].innerText, cells[1].innerText, cells[2].innerText];
});

console.log(JSON.stringify(tableData));
table {
  border-collapse: collapse;
  font-family: monospace;
  text-align: right;
}

table, th, td {
  border: 3px solid black;
}

th, td {
  padding: 5px 10px;
}
<table id="table">
  <tr><th>PRICE</th><th>QUANTITY</th><th>TOTAL</th></tr>
  <tr><td>1</td><td>5</td><td>5</td></tr>
  <tr><td>10</td><td>2</td><td>20</td></tr>
  <tr><td>8</td><td>4</td><td>32</td></tr>
</table>

If you prefer to use a for...of loop instead:

let tableData = [];

// Iterate over every row:
for (const row of document.getElementById('table').rows) {
  // Get the cells in the current row:
  const cells = row.children;
  
  // Read the text on the columns we want:
  tableData.push([cells[0].innerText, cells[1].innerText, cells[2].innerText]);
}

// Remove the first row (header):
tableData = tableData.slice(1);

console.log(JSON.stringify(tableData));
table {
  border-collapse: collapse;
  font-family: monospace;
  text-align: right;
}

table, th, td {
  border: 3px solid black;
}

th, td {
  padding: 5px 10px;
}
<table id="table">
  <tr><th>PRICE</th><th>QUANTITY</th><th>TOTAL</th></tr>
  <tr><td>1</td><td>5</td><td>5</td></tr>
  <tr><td>10</td><td>2</td><td>20</td></tr>
  <tr><td>8</td><td>4</td><td>32</td></tr>
</table>

Or just a normal for loop instead:

const rows = document.getElementById('table').rows;
const totalRows = rows.length;
const tableData = [];

// Iterate over every row, skipping the first one (header) already:
for (let i = 1; i < totalRows; ++i) {
  // Get the cells in the current row:
  const cells = rows[i].children;
  
  // Read the text on the columns we want:
  tableData.push([cells[0].innerText, cells[1].innerText, cells[2].innerText]);
}

console.log(JSON.stringify(tableData));
table {
  border-collapse: collapse;
  font-family: monospace;
  text-align: right;
}

table, th, td {
  border: 3px solid black;
}

th, td {
  padding: 5px 10px;
}
<table id="table">
  <tr><th>PRICE</th><th>QUANTITY</th><th>TOTAL</th></tr>
  <tr><td>1</td><td>5</td><td>5</td></tr>
  <tr><td>10</td><td>2</td><td>20</td></tr>
  <tr><td>8</td><td>4</td><td>32</td></tr>
</table>

Upvotes: 2

Related Questions