AJAX / JQuery - Print each nested child on new table row

Question

I've been tearing my hair out over this seemingly simple problem, but I can't wrap my head around it.

I'm trying to generate a table in HTML using AJAX and some JQuery. The XML holds the data that I want rendered, each Child Node being rendered on a new line. The AJAX does all of the heavy lifting and generates the table.

XML Code:

    <?xml version="1.0" encoding="utf-8"?>

<shows>
  <show>
    <title>Title</title>
    <light>
      <rule>Rule 1</rule>
      <rule>Rule 2</rule>
    </light>
    <medium>
      <rule>Rule 3</rule>
      <rule>Rule 4</rule>
    </medium>
    <hard>
      <rule>Rule 5</rule>
      <rule>Rule 6</rule>
    </hard>
    <extreme>
      <rule>Rule 7</rule>
    </extreme>
  </show>
</shows>

Obviously, I'll have more than this tiny bit of data down but that's besides the point.

Pertinent HTML

<table id="rules"></table>

And the Javascript:

$(xml).find('shows > show').each(function () {                                                  
                var title = $(this).find('title').text();                                                       
                title = "<tr>" + "<th>" + "</th>" + "<th>" + "<h1>" + title + "</h1>" + "</th>" + "</tr>";

                category = "<tr>" + "<th>" + "</th>" + "<th>" + "Category Title: " + "</th>" + "</tr>";
                rule = $(this).find('light > rule').text(); //problem is here?
                punish = punish + "<tr>" + "<td>" + ruleCount + "</td>" + "<td>" + rule + "</td>" + "</tr>";

There's much more to the Javascript than this, but the line with the comment above I believe is the culprit of my headache. It's also essentially copied and pasted 3 more times in the script and modified to generate rules for medium, hard and extreme.

Here's the problem:

The Title, Category labels (table headers), rows, cells all generate just fine, but the data needs to be rendered so that each node (rule) is created on a new line (or new table row, essentially). Instead, the rule = $(this).find('light > rule').text(); line is cramming Rule 1 and 2 together, 3 and 4 together, etc (when reused further in the script obviously). The resulting HTML is a bit like this:

<table id="rules">
     <tr><th></th><th><h1>Title</h1></th></tr>
     <tr><td>1</td><td>Rule1Rule2</td></tr>
</table>

What I really want is for each rule to be on it's own table row. Like this:

<table id="rules">
    <tr><th></th><th><h1>Title</h1></th></tr>
    <tr><td>1</td><td>Rule1</td></tr>
    <tr><td>2</td><td>Rule2</td></tr>
</table>

Any idea what I'm doing wrong??

Thanks in advance.

Answer 1

rule = $(this).find('light > rule').text();

This selects the two rule elements in light. text() returns a concatenation of the text of all elements in the wrapped set. You'll need to iterate over each rule using each()

$(this).find('light > rule').each(function() {
    punish += "<tr><td>" + ruleCount + "</td><td>" + $(this).text() + "</td></tr>";
});

Answer 2

You need to use a loop to iterate through each rule

$(this).find('light > rule').each(function () {
    punish = punish + "<tr>" + "<td>" + (ruleCount++) +"</td>" + "<td>" + $(this).text() + "</td>" + "</tr>";
})