Iterating table columns & constructing JSON - jQuery

Question

This might be a trivial question, but I am a bit confused how to extract column data & construct an object.

The table is dynamic in nature, generated based on the data provided.

The format is like this

<tr>
   <td> Label </td>
   <td> 
        <input type = "radio" value="yes"/> YES 
        <input type = "radio" value="no"/>  NO  
        <textarea> 
   </td>
   <td> 
        <input type = "radio" value="yes"/> YES 
        <input type = "radio" value="no"/>  NO  
        <textarea> 
   </td>

   // This structure can repeat
   ...
   ...
</tr>

// Rows will repeat themselves

I have jotted up this so far

$(function () {
$('#submit').click(function () {
    var i = 0;
    var t = document.getElementById('table');
    $("#table tr").each(function () {
        var columns = $(this).find('td');

        /* how to extract column data here?, so that I construct
           a column object and keep looping for the other columns 


    });
});

My JSON needs to be like this: [{label:data, isPresent:data, value:data}, {..}, {..}]

I am unable to get the data of both columns () in one go and then loop over the next 2 columns.

jedemu115 · Accepted Answer · 2015-09-27 16:20:23Z

1

Judging from your question, I assume you're quite new at jQuery, so I'm gonna give you a simple solution that can be used in a lot of ways.

I advise you to add classes to your HTML. This way, we can identify all the properties of the table row, independent of where the HTML-element is located in the tr-tag or what type of tag the data is placed into:

<tr>
   <td class="item-label"> Label </td>
   <td> 
        <input class="item-option-yes" type="radio" value="yes"/> YES 
        <input class="item-option-no" type="radio" value="no"/>  NO  
   </td>
   ... other cells with data ...
</tr>
... other rows ...

In your each-function, you can combine the $(this) and the find()-functions to construct your JSON-object

$(function () {
$('#submit').click(function () {
    var itemArray = [];

    $("#table tr").each(function (index) {
        var itemData = {
            "label": $(this).find(".item-label").text(),
            "isPresent": $(this).find(".item-option-yes")[0].checked,
            "value": $(this).find(".some-other-class").text()
        };
        itemArray.push(itemData);
    });
});

For more information about the find, $(this) and each-functions, please check the jQuery website

answered Sep 27, 2015 at 16:20

jedemu115

1618 bronze badges

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

8 Comments

AgentX Over a year ago

I was able to do it, but this seems much elegant solution. I have one question. The for each loop iterates over each <td> of the row, so when we do find(".item-label"), there is no element with that class in the <td> then how does it find the value of that element?

AgentX Over a year ago

I forgot to mention that the columns can repeat in a row... what needs to be modified in the solution?

jedemu115 Over a year ago

I'm not sure I understand exactly what you're saying in your comments. Can you give a better example of how your HTML code looks like with the different types of rows and columns?

AgentX Over a year ago

I have edited the question. Basically in each row there can be more than 1 columns having the same input params (radio buttons & checkboxes). When I use the above mentioned approach it just works for the 1st column

jedemu115 Over a year ago

Try giving the <td> with the radio buttons a class (for example item-option). Assuming the td's are always in the same order, you can then iterate trough the different labels with $(this).find(".item-label").each()

|

Collectives™ on Stack Overflow

Iterating table columns & constructing JSON - jQuery

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related