get jsonArray from table

Question

I have a table and need to build json array. I need value from 1 and 4 column of table.

HTML

<table class="table table-striped" id="development_mapping">
                                <thead>
                                    <tr>
                                        <th>Visual Feature</th>
                                        <th>Step</th>
                                        <th>Output</th>
                                        <th>Data Feature</th>
                                    </tr>
                                </thead>
                                <tbody>                      
                                <tr><td>color</td> 
                                        <td><select id="sss"><option data-id="528092be144b4fbf65893404" selected="selected">first-step</option><option data-id="52809373144b4fbf6589340c">kmeans</option></select></td>
                                        <td><select id="ooo"><option data-id="output" selected="selected">output</option></select></td>
                                        <td><input id="value1" class="feature-execution"value="id"></td></tr></tbody>                                        
                            </table>

Here is my solution, a function to made an json array from table

JAVASCRIPT

var jsonArray = {};

$('#development_mapping').find('tr').each(function () {
    var name = $(this).find('td:first').text(); 

    jsonArray[name] = {

          variable : $(this).find('td:eq(3)').text()

    }; 
});

I have done, but not understand, why I get " " from value of 4 column. I mean, why variable in variable is always getting " "

This is my DEMO

gen_Eric · Accepted Answer · 2013-11-15 19:18:50Z

1

Your selector: $('#development_mapping').find('tr') is selecting all <tr> tags in the table. Even the one in the <thead>! The <thead> doesn't have <td> tags, so that's where the " " is coming from.

Try this:

$('#development_mapping').find('tbody tr').each(function () {
    var name = $(this).find('td:first').text(); 

    jsonArray[name] = {

          variable : $(this).find('td:eq(3)').text()

    }; 
});

answered Nov 15, 2013 at 19:18

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

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

Comments

Brian Glaz · Accepted Answer · 2013-11-15 19:23:10Z

0

You are using .text() but there is no actual text in your 3rd td tag.

try this maybe?

variable : $(this).find('td:eq(3) input').val()

answered Nov 15, 2013 at 19:23

Brian Glaz

15.7k4 gold badges40 silver badges55 bronze badges

Comments

Lim H. · Accepted Answer · 2013-11-15 19:33:06Z

0

There are 2 problems with your code.

Remove the surrounding <tr> in your table head definition.
Use this to access input value

variable: $(this).find('td:eq(3) > input').first().val()

$.find() will return a collection and you'll need to get the first object of the collection for further use. Plus, you'll need to search for input inside the cell, not the cell itself.

Here is the working fiddle: http://jsfiddle.net/toshkaexe/7q3KP/

edited Nov 15, 2013 at 19:33

answered Nov 15, 2013 at 19:28

Lim H.

10.1k9 gold badges51 silver badges76 bronze badges

Collectives™ on Stack Overflow

get jsonArray from table

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related