How do I parse nodes from an XML document into an HTML page using javascript?

Question

I'm trying to list the Across and Down clues of a crossword puzzle from an XML feed, but can't figure out how to drill into the nodes. Here's a piece sample of the XML:

<across>
<a1 a="BLOC"
    c="Group of like-minded voters"
    n="1"
    cn="1" />
<a2 a="BATOR"
    c="Ulan ___, Mongolia"
    n="6"
    cn="5" />
<a3 a="OMEN"
    c="Black cat, supposedly"
    n="12"
    cn="10" />

...

<down>
<d1 a="BLIPS"
    c="Spots on a radar screen"
    n="1"
    cn="1" />
<d2 a="LIMIT"
    c="Word at the express checkout aisle"
    n="2"
    cn="2" />
<d3 a="OMANI"
    c="Man from Muscat"
    n="3"
    cn="3" />
<d4 a="CACKLE"
    c="Laugh like the Wicked Witch"
    n="4"
    cn="4" />

I used the following method in my javascript:

document.getElementById('across_clues').innerText = xmlhttp.responseXML.getElementsByTagName('across')[0].childNodes;

document.getElementById('down_clues').innerText = xmlhttp.responseXML.getElementsByTagName('down')[0].childNodes;

I made two divs in my HTML ("#across_clues" and "#down_clues"), but this is what is rendered on my HTML page:

ACROSS

[object NodeList]

DOWN

[object NodeList]

I'm sure this is a rather simple error on my part, as I am very new to parsing XML with javascript, but what am I missing? Is there another call that I need to pass in to actually list the XML data? Please advise.

Thanks, Carlos

UPDATED QUESTION

OK, so here's what I ran into in my second attempt to solve this problem:

I figured out how to pull in data from individual nodes...one at a time, but I can't figure out how to list an array of nodes all at once. I don't want to list every value in , , etc...only 'cn' and 'c' as a pair for each childNode of (same thing with ).

Here's my revised code:

var across = xmlhttp.responseXML.getElementsByTagName('across')[0].childNodes;
var down = xmlhttp.responseXML.getElementsByTagName('down')[0].childNodes;

var a1Node = xmlhttp.responseXML.getElementsByTagName('a1')[0];
var a2Node = xmlhttp.responseXML.getElementsByTagName('a2')[0];

var d1Node = xmlhttp.responseXML.getElementsByTagName('d1')[0];
    var d1Node = xmlhttp.responseXML.getElementsByTagName('d2')[0];

    document.getElementById('across_clues').innerText = a1Node.getAttribute('cn');
document.getElementById('across_clues').innerText = a1Node.getAttribute('c');

document.getElementById('down_clues').innerText = d1Node.getAttribute('cn');
    document.getElementById('down_clues').innerText = d1Node.getAttribute('c');

RESULT:

Only one attribute renders into #accross_clues and one attribute in #down_clues. Each div only displays the last .getAttribute() call on the list...no matter how many I list. I also tried the function below, but still no success:

    function getAcross() {
    if (across) {
    var acrossNodes = across.childNodes;
    if (acrossNodes) {
    for (var i = 0; i < acrossNodes.length; i++) {
    var cnAttr = acrossNodes[i].getAttribute('cn');
    var cAttr = acrossNodes[i].getAttribute('c');
    document.getElementById('across_clues').innerText = cnAttr + '.' + cAttr;
      }
    }
  }
}

Can anyone help me out with this? I am a serious novice when it comes to XML and childNodes. Your feedback is much appreciated.

Thanks, Carlos

There is already question like that, http://stackoverflow.com/questions/649614/xml-parsing-in-javascript — Alexander Beletsky, Aug 25 '11 at 06:08
The post you listed doesn't mention parsing attributes within childNodes... — Carlos, Aug 25 '11 at 07:15

score 0 · Accepted Answer · answered Aug 25 '11 at 05:20

0

Here you are mentioning it as childNodes, this itself is an object and u have access the childNodes with the indexes, like childNodes[0], childNodes[1],.......... Hope this helps you

answered Aug 25 '11 at 05:20

AmGates

2,127
16
29

Andrew D. · Answer 2 · 2011-08-25T05:44:39.633

In your code you try assing XML DOM nodes collection (collection of nodes) to innerHTML property (string type). Additionaly, tags A1, A2 ... is not defined in html: what do you expect to get?

In my opinion you can do one from next (without using extrenal libs, only with javascript):

(bad way) With using javascript you can go starting from xmlhttp.responseXML.documentElement and looping through all XML DOM tree elements, attributes, values and create from it content HTML DOM node tree. This root HTML DOM you can append with using appendChild() to your document HTML DOM.
(true way) Second way is more proper. You need XSL document to transform your XML document to fragment with using importStylesheet() and transformToFragment() methods of XSLTProcessor object. This fragment you can easily append to your document HTML DOM with appendChild() method. -

For IE8 and less (for IE9 not tested) this above "true way" is not works because XSLTProcessor is not implemented. In IE you must use transformNode(stylesheet). This create HTML string and you can assing it to innerHTML property of your document HTML DOM node.

Update: XSLTProcessor can be not implemented in some mobile browsers.

Thanks for the tips Andrew. I am actually able to pull nodes from the XML individually (i.e. "document.getElementById('across_clues').innerText = xmlhttp.responseXML.getElementsByTagName('a1')[0].getAttribute('c');" but the problem is, there are dozens of 'a' nodes and I am looking for a way to list only the 'cn' and 'c' attribute of all nodes in a list with one command. — Carlos, Aug 25 '11 at 07:09

How do I parse nodes from an XML document into an HTML page using javascript?

UPDATED QUESTION

2 Answers2