how to extract data from html table using jQuery each function

Question

I'm need to extract data from a html table to create a JSON array.

Here is the structure of HTML table,

    <table class="tableClass">
        <thead class="tableHeaderClass" >
           <tr>
              <th>header_column1</th>
              <th>header_column2</th>
              <th>header_column3</th>
           </tr>
        </thead>
        <tbody class="tableBodyClass">
           <tr>
              <td>row1_column1</td>
              <td>row1_column2</td>
              <td>row1_column3</td>
           </tr>
           <tr>
             <td>row2_column1</td>
             <td>row2_column2</td>
             <td>row2_column3</td>
           </tr>
         </tbody>
    </table>

In my JavaScript function, I'm doing this

  function() {

    var json = {
        header_column1 : '',
        header_column2 : '',
        header_column3 : ''
    };

    var data = [];
    $('tableClass').find('tbody').children('tr').each(function() {
         var $tds = $(this).find('td');
         json.header_column1 = $tds.eq(0).text();
         json.header_column2 = $tds.eq(1).text();
         json.header_column3 = $tds.eq(2).text();

         data.push(json);
    });

    return data;

 }

when I print my array, but I'm getting only 'row2_column1, row2_column2, row2_column3'.

Couldn't workout what I'm doing wrong/missing. Would be great if you could help me out with this.

There's no way you could get anything at all as long you use `$('tableClass')` without `.` — Roko C. Buljan, Aug 23 '14 at 14:00
You can also condense the each line to: `$('.tableClass tbody tr').` no need to do a find and then children call — Patrick Evans, Aug 23 '14 at 14:04
Also your code makes no sense at all, you have headers and non-headers elements but you fill your Object literal with properties named "header_column1" ... you should be clear about your code logic before trying anything. Also using `=` instead of `:` are errors that easily catchable by just opening *Console* or using a better text editor. — Roko C. Buljan, Aug 23 '14 at 14:11
Thanks for the feedback guys, I've just started to get my teeth into JS, still fairly inexperienced I guess..really welcome your feedback it helps me to improve the quality of my code..oh btw, there are some typos as well..forgotten the . and used = instead of : will correct my post.. — genwip, Aug 23 '14 at 14:21

score 1 · Answer 1 · answered Aug 23 '14 at 14:00

$('tableClass')

Should be

$('.tableClass')

When debugging jQuery, always make your selectors the initial suspects. Check they're finding elements before continuing the chain. Thus:

alert($('tableClass').length)

...would give you 0.

(Sidenote:

$('tableClass').find('tbody').children('tr')

can be shortened to

$('tableClass').find('> tbody > tr')

score 0 · Accepted Answer · edited May 23 '17 at 10:24

You are using the wrong selector, $('tableClass') will try to select an element with a name of tableClass, ie: <tableClass></tableClass> You can use this instead:

$('.tableClass tbody tr')

Also since you are using an object each element in the array is going to reference the same object

//Clones the json object, might not be the most efficient method 
var newHeader = JSON.stringify(JSON.parse(json));
//Or just create a new object each iteration
var newHeader = {};
newHeader.header_column1 = $tds.eq(0).text();
newHeader.header_column2 = $tds.eq(1).text();
newHeader.header_column3 = $tds.eq(2).text();

data.push(newHeader);

See this question about object cloning.

Thanks Patrick!!, creating a new object each iteration did the trick!! — genwip, Aug 23 '14 at 23:48

score 0 · Answer 3 · answered Aug 23 '14 at 14:11

Beyond the selectors, the object syntax is invalid, it should be:

var json = {
    header_column1: '',
    header_column2: '',
    header_column3:''
}

Also, you are updating and pushing the same object twice, so you will end up with two references to the last update on your array. In essence just getting 'row2_column1, row2_column2, row2_column3' twice on the array, instead of 'row1_column1, row1_column2, row1_column3' and 'row2_column1, row2_column2, row2_column3'

Ditch the var json declaration on top and just do this within the 'each':

var json = {}
json.header_column1 = $tds.eq(0).text();
json.header_column2 = $tds.eq(1).text();
json.header_column3 = $tds.eq(2).text();

how to extract data from html table using jQuery each function

3 Answers3