Create table from XML document with jQuery

Question

I am trying to create a dynamic HTML table from an XML file. There are several major "chapters", under each letter of the alphabet. I want a table to be generated under each letter, with a format similar to this:

Code       Description
Q87.1      Some description
F44.4      Another description
...

Here is what the XML file looks like:

<index>
<letter>
<title>A</title>
<mainTerm>
<title>Some description</title>
<code>Q87.1</code>
</mainTerm>
<mainTerm>
<title>Another description<nemod>(-some) (detail)</nemod></title>
<code>F44.4</code>
</mainTerm>
<mainTerm>
<title>A more detailed term</title>
<seeAlso>similar terms</seeAlso>
  <term level="1">
<title>acute</title>
<code>R10.0</code>
</term>
<term level="1">
<title>angina</title>
<code>K55.1</code>
</term>
</mainTerm>
</letter>
.....
</index>

And here is the jQuery code I'm using to create the table into a div with id="content":

  $(document).find("letter").each(function(){
 // Define letters variable
 $letters =  $(this).find('> title').text();

//Find descendants of each letter            
$codes = ($(this).find('code').text());
$desc = ($(this)).find('mainTerm title').text();

//Build table
$("#content").append(
  '<table border="1"><tr><th>Code</th><th>Description</th></tr><tr><td> '+$codes+' </td><td> '+$desc+' </td></tr></table>'
    );            
(end brackets for the above)

What I get in the output is a table with just one row for each letter/chapter, with all the codes and all the descriptions lumped together in one cell each.

What I need is a dynamic table where, on each row, I get a single code and its corresponding description. How do I do that?

Bob Dust · Accepted Answer · 2016-11-24 04:31:05Z

1

    var extractTerms = function ($xml, selector) {
        return $.makeArray($xml.find(selector).map(function () {
            var term = {title: $(this).children('title:first').text()};
            var $code = $(this).children('code:first');
            if ($code.length > 0)
            {
                term.code = $code.text();
            }
            else
            {
                term.seeAlso = $(this).children('seeAlso:first').text();
            }
            var terms = extractTerms($(this), 'term');
            if(terms.length > 0)
            {
                term.terms = terms;
            }
            return term;
        }));
    };
    var loadTable = function (terms) {
        var $table = $('<table><thead><tr><td>Code</td><td>Description</td></tr></thead></table>').append($.map(terms, function (e, i) {
            var $row = $('<tr><td>' + (e.code || '') + '</td><td><div>' + e.title + '</div></td></tr>');
            if (e.terms)
            {
                $('<div></div>').append(loadTable(e.terms)).appendTo($row.children('td:nth-child(2)'));
            }
            return $row;
        }));
        return $table;
    };
    $(function () {
        var xml = '<index> <letter> <title>A</title> <mainTerm> <title>Some description</title> <code>Q87.1</code> </mainTerm> <mainTerm> <title>Another description<nemod>(-some) (detail)</nemod></title> <code>F44.4</code> </mainTerm> <mainTerm> <title>A more detailed term</title> <seeAlso>similar terms</seeAlso>   <term level="1"> <title>acute</title> <code>R10.0</code> </term> <term level="1"> <title>angina</title> <code>K55.1</code> </term> </mainTerm> </letter> </index>';
        var $xml = $(xml);
        var terms = extractTerms($xml, 'mainTerm');
        var $table = loadTable(terms);
        $('body').append($table);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

edited Nov 24, 2016 at 4:31

answered Nov 24, 2016 at 2:49

Bob Dust

2,4601 gold badge20 silver badges14 bronze badges

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

3 Comments

Cucurigu Over a year ago

Thanks a lot, @Bob Dust! I got it working, except for an important detail: the XML structure has occasionally deeper nodes, and I would like to break those, too, into some sort of subtable in the cells where they occur. For ex., if you look at the last row in your result above, we get "R10.0K55.1 A more detailed termacuteangina". I'd like that to displayed into a similar table format, perhaps nested in the cell where "A more detailed term" is displayed. Not sure I made this as clear as it needs to be, but I am hopeful :-)

Bob Dust Over a year ago

I got it. Let me try to deal with deeper level.

Cucurigu Over a year ago

Thanks a lot again, @Bob Dust! I like your idea!

Collectives™ on Stack Overflow

Create table from XML document with jQuery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related