Create an array of objects by iterating through table rows

后端 未结 5 1906
鱼传尺愫
鱼传尺愫 2021-01-27 04:46

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:

相关标签:
5条回答
  • 2021-01-27 04:46

    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>

    0 讨论(0)
  • 2021-01-27 04:54

    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.

    0 讨论(0)
  • 2021-01-27 04:58

    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.

    0 讨论(0)
  • 2021-01-27 05:02

    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(){
        // ...
      });
    
    0 讨论(0)
  • 2021-01-27 05:05

    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

    0 讨论(0)
提交回复
热议问题