How do I loop through XML nodes in JavaScript?

Question

I'm trying to loop through XML nodes containing information about users to create an HTML table on my website.

This is what the XML looks like:

<websites_name>
<user>...</user>
<user>...</user>
.
.
.
</websites_name>

And this is the code I'm trying to parse it with:

for(var user in xmlhttp.getElementsByTagName('user')){   //fix this row to me
    //Create a new row for tbody
    var tr = document.createElement('tr');
    document.getElementById('tbody').appendChild(tr);
}

UPDATE

xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","some URL",true);
xmlhttp.send();
var xmlDoc = xmlhttp.responseXML;
var root = xmlDoc.getElementsByTagName('websites_name');
for(var i=0, i<root[0].childNodes.length,i++){
    //Create a new row for tbody
    var tr = document.createElement('tr');
    document.getElementById('tbody').appendChild(tr);
}

Nat Riddle · Accepted Answer · 2021-05-19 20:07:59Z

21

One of the least intuitive things about parsing XML in JavaScript is that the text inside the element tags is actually a node you have to traverse into.

Assuming it's <user>text data</user>, you not only have to traverse into the text node of the user element to extract your text data, but you have to create a text node with that data in the DOM to see it. See nodeValue and and createtextnode:

// get XML 
var xml = xhr.responseXML;

// get users
var users = xml.getElementsByTagName("user");
for (var i = 0; i < users.length; i++) {   
    var user = users[i].firstChild.nodeValue;
    var tr = document.createElement("tr");
    var td = document.createElement("td");
    var textNode = document.createTextNode(user);
    td.appendChild(textNode);        
    tr.appendChild(td);        
    document.getElementById("tbody").appendChild(tr);
}

edited May 19, 2021 at 20:07

Nat Riddle

1,0041 gold badge15 silver badges28 bronze badges

answered Dec 6, 2010 at 2:37

codekiln

3,7402 gold badges41 silver badges53 bronze badges

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

3 Comments

einstein Over a year ago

I've located the problem it lies in the row "var root = xmlDoc.getElementsByTagName("websites_name");".What have I done wrong? Look at my update. Your solution is the same except for the textNode. It is actually mor XML nodes under user

einstein Over a year ago

ok I know what the problem was. A very minor. The scripts that produced my XML , I forgot the row "header("Content-type: text/xml");"

codekiln Over a year ago

awesome - yeah, that content type stuff is super important with ajax. this stuff is a lot easier with libraries like jquery ...

Collectives™ on Stack Overflow

How do I loop through XML nodes in JavaScript?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related