Create an array of objects by iterating through table rows

Question

I have an HTML table and I want to iterate through its rows and create a collection or lets say an "array of objects".

For example:

<table id="tbPermission">
  <tr>
    <th>User ID</th>
    <th>User Name</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Test1</td>
  </tr>
</table>

I want to create a collection as below:

var trArray = [];
$('#tbPermission tr').each(function () {
    var tdArray = [];
    $(this).find('td').each(function () {

        // I want to create the array of objects here …
        tdArray.push();
    });

    // Final array
    trArray.push(tdArray);
});

The arrays may be like below:

tdArray : {'UserID' : '1', 'UserName' : 'Test1'};

and:

trArray : [
    {'UserID' : '1', 'UserName' : 'Test1'},
    {'UserID' : '2', 'UserName' : 'Test2'}
]

Answer 1

Try this code

var trArray = [];
$('#tbPermission tr').each(function () {
    var tr =$(this).text();  //get current tr's text
    var tdArray = [];
    $(this).find('td').each(function () {
        var td = $(this).text();  //get current td's text
        var items = {}; //create an empty object
        items[tr] = td; // add elements to object 
        tdArray.push(items); //push the object to array
    });    
});

Here, I just created an empty object, filled object with references of tr and td, the added that object to the final array.

adding a working jsfiddle

Answer 2

This solution relies on adding thead and tbody elements which is a good idea anyways since it indicates to the browser that the table actually is a "data" table and not presentational.

jQuery has a .map() function. map is a basic function where you take an array and then replace the values with a the return value of a callback function - which results in a new array.

$([1,4,9]).map(function(){ return Math.sqrt(this) });
// [1, 2, 3]

.toArray converts the array like jQuery object we get into a "true array".

jQuery(function(){
  
  var $table = $("#tbPermission");
  
  var headers = $table.find('thead th').map(function(){
    return $(this).text().replace(' ', '');
  });
  
  var rows = $table.find('tbody tr').map(function(){
    var result = {};
    var values = $(this).find('>td').map(function(){
      return $(this).text();
    });
    // use the headers for keys and td values for values
    for (var i = 0; i < headers.length; i++) {
      result[headers[i]] = values[i];
    }
    
    // If you are using Underscore/Lodash you could replace this with
    // return _.object(headers, values);

    return result;
  }).toArray();

  
  // just for demo purposes
  $('#test').text(JSON.stringify(rows));
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbPermission">
  <thead>
    <tr>
      <th>User ID</th>
      <th>User Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Test1</td>
    </tr>
  </tbody>
</table>

<textarea id="test"></textarea>

If you for whatever reason cannot change the HTML you could use the index of the rows to differentiate between headers and rows of data:

  var headers = $table.find('tr:eq(0) th').map(function(){
    return $(this).text().replace(' ', '');
  });

  var rows = $table.find('tr:gt(0)').map(function(){
    // ...
  });

Answer 3

I would suggest changing your html slightly.

<table id="tbPermission">
    <tr>
        <th>User ID</th>
        <th>User Name</th>
    </tr>
    <tr>
        <td class="userid">1</td>
        <td class="username">Test1</td>
    </tr>
</table>

Then in your javascript when you want to get all the elements as an array you could do.

var userIdArray = $('#tbPermission .userid').map(function(userid){ return $(userid).html(); }).toArray();

This will find all elements with a class userid on the table, collect just the values, and .toArray() that result to get a basic javascript array. You can then take that and manipulate it into whatever json structure you want, or you could possibly create your json object inside that map function.

Answer 4

Check the console, you will get an array with the desired objects

var arr = [];
$('#tbPermission tr:not(.header)').each(function() {
  var that = $(this);
  var id = that.find('td').eq(0).text();
  var name = that.find('td').eq(1).text();
  var obj = { 'userId': id , 'userName': name  };
  arr.push(obj);
});
console.log(arr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tbPermission">
  <tr class="header">
    <th>User ID</th>
    <th>User Name</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Test1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Test2</td>
  </tr>
</table>

Answer 5

It's a bit tricky based on the given structure. You may have to modify the HTML a bit to map cells to headers, like below.

var myArray = [];
  
$("#tbPermission").find("td").each(function() {
    var $this = $(this), obj = {};
    obj[$this.data("column")] = $this.text();
    myArray.push(obj);
});

alert ( JSON.stringify(myArray) );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbPermission">
    <tr>
        <th>User ID</th>
        <th>User Name</th>
    </tr>
    <tr>
        <td data-column="User ID">1</td>
        <td data-column="User Name">Test1</td>
    </tr>
</table>

Please give in some time to learn about Array.push() and Objects in Javascript. Hope that helps.