jQuery: parse XML with inconsistent row data into a table

Question

This is probably a very rookie question but i am stumped.

I have the following code which is parsing an XML file and putting each element into a table. My problem is that there is not always nine elements in each row and the names of each element changes between XML files. Is there any way to create a loop that runs through each row (without knowing the element name (col0, col1, etc) ) and puts it into a table?

The XML goes like this:

<row>
    <Col0>titles</Col0>
    <Col1>more titles</Col1>
    <Col2>title</Col2>
    <Col3>name</Col3>
    <Col4>another name</Col4>
    <Col5>different name</Col5>
    <Col6></Col6>
    <Col7></Col7>
    <Col8></Col8>
</row>
<row>
    <Col0>5:58</Col0>
    <Col1>-</Col1>
    <Col2>6:08</Col2>
    <Col3>6:11</Col3>
    <Col4>6:15</Col4>
    <Col5>6:19</Col5>
    <Col6></Col6>
    <Col7></Col7>
    <Col8></Col8>
</row>

etc....

Here is my code:

<script type="text/javascript">
    $(document).ready(function()
  {
    $.get('newlayout.xml', function(d){
    $('.tabl').append('<table>');

    $(d).find('row').each(function(){

        var $row = $(this);

        var col01 = $row.find('Col0').text();
        var col02 = $row.find('Col1').text();
        var col03 = $row.find('Col2').text();
        var col04 = $row.find('Col3').text();
        var col05 = $row.find('Col4').text();
        var col06 = $row.find('Col5').text();
        var col07 = $row.find('Col6').text();
        var col08 = $row.find('Col7').text();
        var col09 = $row.find('Col8').text();


        html = '<tr>'  
        html += '<td style="width:80px"> ' + col01 + '</td>';
        html += '<td style="width:80px"> ' + col02 + '</td>' ;
        html += '<td style="width:80px"> ' + col03 + '</td>' ;
        html += '<td style="width:80px"> ' + col04 + '</td>' ;
        html += '<td style="width:80px"> ' + col05 + '</td>' ;
        html += '<td style="width:80px"> ' + col06 + '</td>' ;
        html += '<td style="width:80px"> ' + col07 + '</td>' ;
        html += '<td style="width:80px"> ' + col08 + '</td>' ;
        html += '<td style="width:80px"> ' + col09 + '</td>' ;
                    html += '</tr>';

        $('.tabl').append($(html));

    });
});
});

Thanks in advance,
Tom

@you can definetly refine the code , all those lines can be refined to 2 or 3 lines. — kobe
– kobe, Commented May 1, 2011 at 6:25

ampersand · Accepted Answer · 2011-05-01 07:47:17Z

7

try the following:

$('row').each(function(){
    var $row = $(this);
    $('.tabl').append($('<tr></tr>').append($row.children().wrapInner('<td style="width:80px"></td>').find('td')));
})

Working example at jsFiddle.

I think you can follow what's happening here. If not, ask away. It's mostly an issue of understanding the different jQuery functions, and for this nothing beats api.jquery.com

edit: This version gets rid of the empty cells, by selecting only those cells that are a parent of something (i.e. not empty):

$('row').each(function(){
    var $row = $(this);
    $('.tabl').append($('<tr></tr>').append($row.children().wrapInner('<td style="width:80px"></td>').find('td:parent')));
})

edited May 1, 2011 at 7:47

answered May 1, 2011 at 6:50

ampersand

4,3162 gold badges26 silver badges33 bronze badges

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

3 Comments

ampersand Over a year ago

This version outlines the tables cells to prove that the empty cells are still being created: jsfiddle.net/Eyd67/1

entropo Over a year ago

The version which gets rid of empty cells has an issue: It will destroy the column ordering if there's an empty cell in the middle of a row. See: jsfiddle.net/entropo/mJdgq/2 The solution in my answer avoids this as long as the header row is properly formatted.

ampersand Over a year ago

Indeed, I noticed that. But that can be an "issue" or a "feature" :) ...and after all, we are providing solutions to the OP's data, not our data ;)

entropo · Accepted Answer · 2011-05-01 07:09:22Z

0

$(d).find('row').each(function() {
    var $row = $(this);
    html = '<tr>';
    var i = 0;

    while (true) {
        if ($.trim((colX = $row.find('Col' + i).text())) !== '') {
            html += '<td style="width:80px"> ' + colX + '</td>';
            i++;
        }
        else {
            break;
        }
    }

    html += '</tr>';
    $('.tabl').append($(html));
});

edited May 1, 2011 at 7:09

entropo

2,48115 silver badges15 bronze badges

answered May 1, 2011 at 6:42

Mike

1,0421 gold badge8 silver badges14 bronze badges

Comments

entropo · Accepted Answer · 2011-05-02 06:57:55Z

0

If you want to only have columns for fields with a name in the first row, then this will work for you:

http://jsfiddle.net/entropo/ffyDT/

$('row').each(function() {
    var $row = $(this),
        fieldcount = fieldcount || 0,
        afterfirst;
    if (! afterfirst) {
        fieldcount = $row.find(':not(:empty)').length;
        afterfirst = 1;
    }

    $('.tabl').append($('<tr />').append($row.children(':lt('+fieldcount+')')
        .wrapInner('<td />').find('td')));
});

edited May 2, 2011 at 6:57

answered May 1, 2011 at 7:38

entropo

2,48115 silver badges15 bronze badges

Collectives™ on Stack Overflow

jQuery: parse XML with inconsistent row data into a table

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related