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
– Roko C. Buljan, Commented Aug 23, 2014 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
– Patrick Evans, Commented Aug 23, 2014 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
– Roko C. Buljan, Commented Aug 23, 2014 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
– genwip, Commented Aug 23, 2014 at 14:21

Mitya · Accepted Answer · 2014-08-23 14:00:46Z

1

$('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')

answered Aug 23, 2014 at 14:00

Mitya

34.7k15 gold badges70 silver badges125 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 10:24:09Z

0

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.

edited May 23, 2017 at 10:24

CommunityBot

11 silver badge

answered Aug 23, 2014 at 14:10

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

1 Comment

genwip Over a year ago

Thanks Patrick!!, creating a new object each iteration did the trick!!

Francisco Paulo · Accepted Answer · 2014-08-23 14:11:03Z

0

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();

answered Aug 23, 2014 at 14:11

Francisco Paulo

6,36230 silver badges25 bronze badges

Collectives™ on Stack Overflow

how to extract data from html table using jQuery each function

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related