javascript, loop through XML

Question

I have a problem with looping through XML structure. My XML Structure looks like:

<main>
<representation>
    <representation>A</representation>
    <class>B</class>
    <notes/>
    <room>C</room>
</representation>
<representation>
    <representation>D</representation>
    <class>E</class>
    <notes>F</notes>
    <room>G</room>
</representation>
</main>
. . .

EDIT: What I want is to iterate trough every main node representation and pass the information into a table. The problem is I get the XML file with this structure and I can't influence it. So how can I only iterate trough every main node representation and skip the inner node (also called representation ) ?

var columnContent1 = xmlDoc.getElementsByTagName("representation");
var tableContent = "";
for (i = 0 ; i<columnContent1.length; i++)
{
    if (i % 2 == 1) { 
        tableContent += "<tr>";
        tableContent += "<td>" + columnContent1[i].childNodes[0].childNodes[0].nodeValue + "</td>";
        tableContent += "<td>" + columnContent1[i].childNodes[1].childNodes[0].nodeValue + "</td>";
        tableContent += "<td>" + columnContent1[i].childNodes[2].childNodes[0].nodeValue + "</td>";
        tableContent += "<td>" + columnContent1[i].childNodes[3].childNodes[0].nodeValue + "</td>";
        tableContent += "</tr>";
    }
};
tableBodyToday.innerHTML = tableContent;

---

In Chrome works okay, but not perfect. in Firefox I get the error TypeError: columnContent1[i].childNodes[0].childNodes[0] is undefined

---

How can I get the information like this?

<tr>
<td>A</td><td>B</td><td></td><td>C</td>
</tr>
<tr>
<td>D</td><td>E</td><td>F</td><td>G</td>
</tr>

If the node is the table data is empty. I think the solution is easy, but I don't get the correct solution.

if (i % 2 == 1) to skip every second innernode representation . Is there a better solution?

Answer 1

I see 3 issues, I have made a fiddle for you here http://jsfiddle.net/MgQf8/1/

I am not 100% sure what you want as the output but firstly..

When you call:

document.getElementsByTagName("representation");

You are selecting parent node and child node, so in your case your list is 4 long, and only 2 of the nodes actually have children (maybe that is why you are doing this if (i %2) ? So I changed it, normally in XML you would use a root node of some kind and then iterate at every child from that position (assuming each child will be named representation therefore ignoring any sub child representation nodes) which I think is causing you some confusion maybe?

Thus you could use:

var columnContent1 = document.getElementsByTagName("root");
for (i = 0 ; i<columnContent1.children.length; i++)

Thirdly the way in which you are trying to get back the values from each child will not work since there is no value for you there, if you use console.dir in chrome you will be able to see the objects structure from there.

columnContent1[i].children[0].innerText
// Returns value `A` of a representationChild node.

I hope this helps shed some light.