jQuery - Create an array from a 2-column table

Question

I have a 2-column table and I would like to convert the cells into an array using jQuery. I currently have that working, but I would like the array to be "2-column" as well, not sure if that's the right terminology. But basically I want the 2 cells from each row to be part of the same "row" in the array. Currently I have this:

$(function() {
  var arr = [];
  $('tbody tr').each(function() {
    var $this = $(this),
        cell = $this.find('td');

      if (cell.length > 0) {
        cell.each(function() {
          arr.push($(this).text());
        });
      }
  });
  
  console.log(arr);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td>Table heading</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apples</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>Bananas</td>
      <td>Yellow</td>
    </tr>
    <tr>
      <td>Oranges</td>
      <td>Orange</td>
    </tr>
    <tr>
      <td>Cucumbers</td>
      <td>Green</td>
    </tr>
</table>

How do I make it so that 0 would be Apples, Red and so on?

what about an array of arrya something like [[Apples, red], [Bananas, Yellow], ...] .. — anees
– anees, Commented Jan 30, 2019 at 21:42
Basically what @AneesIjaz posted, so index 0 would be ['Apples', 'Red'] — user13286
– user13286, Commented Jan 30, 2019 at 21:53

Alex Kudryashev · Accepted Answer · 2019-01-30 21:49:16Z

2

You can do something like this

$(function() {
  var arr = $('tbody tr').get()//convert jquery object to array
    .map(function(row) {
      return $(row).find('td').get()
        .map(function(cell) {
          return cell.innerHTML;
        }).join(',');
    });
  console.log(arr);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td>Table heading</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apples</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>Bananas</td>
      <td>Yellow</td>
    </tr>
    <tr>
      <td>Oranges</td>
      <td>Orange</td>
    </tr>
    <tr>
      <td>Cucumbers</td>
      <td>Green</td>
    </tr>
</table>

answered Jan 30, 2019 at 21:49

Alex Kudryashev

9,5103 gold badges31 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alex Kudryashev Over a year ago

remove join(',') if you want array of arrays.

anees · Accepted Answer · 2019-01-30 21:59:28Z

ok you can also do this.

$(function() {
  var arr = [];
  flag = 0;
  $('tbody tr td').each(function() {
  if(flag == 0){
  arr1 = [];
   arr1.push($(this).text());
   arr.push(arr1);
   flag = 1;
  }else{
  let arr1 = arr[arr.length-1];
  arr1.push($(this).text());
  	arr[arr.length-1] = arr1;
  	flag = 0;
  }
  });
  
  console.log(arr);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td>Table heading</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apples</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>Bananas</td>
      <td>Yellow</td>
    </tr>
    <tr>
      <td>Oranges</td>
      <td>Orange</td>
    </tr>
    <tr>
      <td>Cucumbers</td>
      <td>Green</td>
    </tr>
</table>

David Thomas · Accepted Answer · 2019-01-30 22:07:45Z

I'd suggest:

// using Array.from() to convert the Array-like NodeList returned
// from document.querySelectorAll() into an Array, in order to use
// Array.prototype.map():
let array = Array.from(document.querySelectorAll('tbody tr')).map(

  // tr: a reference to the current array-element of the Array over
  // which we're iterating; using Arrow function syntax:
  (tr) => {

    // here we return the result of the following expression;
    // again using Array.from() to convert the NodeList of
    // the <tr> element's children into an Array, again in order
    // to utilise Array.prototype.map():
    return Array.from(tr.children).map(

      // cell is a reference to the current Node of the Array
      // of Nodes over which we're iterating; here we implicitly
      // return the textContent of each <td> ('cell') Node; after
      // using String.prototype.trim() to remove leading/trailing
      // white-space:
      (cell) => cell.textContent.trim()
    );
  });

let array = Array.from(document.querySelectorAll('tbody tr')).map(
  (tr) => {
    return Array.from(tr.children).map(
      (cell) => cell.textContent.trim()
    );
  });

console.log(array);

<table>
  <thead>
    <tr>
      <td>Table heading</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apples</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>Bananas</td>
      <td>Yellow</td>
    </tr>
    <tr>
      <td>Oranges</td>
      <td>Orange</td>
    </tr>
    <tr>
      <td>Cucumbers</td>
      <td>Green</td>
    </tr>
</table>

References:

Collectives™ on Stack Overflow

jQuery - Create an array from a 2-column table

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related