Solved

need help with simple recursive DOM parsing

Posted on 2006-10-21
5
1,210 Views
Last Modified: 2007-12-19
Hi experts,

I have been looking through the archives, and almost have a solution to my problem, but not really.  The purpose is to fill a YAHOO treeview with my XML data.  In the code below, doc is a well formed XML document.


var rootNode=doc.documentElement;
this.readChildrenIntoTree(rootNode.childNodes, tree.getRoot());
tree.draw();
            
            readChildrenIntoTree:function(nodeList, treeNode) {
               for (x in nodeList)
               {
                 alert(x.nodeValue);
               var tmpNode = new YAHOO.widget.TextNode(x.nodeValue, treeNode, false);
                    
                  if(nodeList.hasChildNodes)
                      readChildrenIntoTree(nodeList.childNodes, tmpNode);
               }
            }

The alert says "undefined", which is quite certainly related to the problem.  How can I get the <x>nodeValue</x>?
And is my recursive code looking more or less correct?

Thanks
Dan





0
Comment
Question by:dbrownell83
  • 2
  • 2
5 Comments
 
LVL 5

Accepted Solution

by:
hbz earned 499 total points
ID: 17782347

I've never used YAHOO trees, but something like this should get you closer

<script>
var xmlText = "<bookstore><book category=\"COOKING\"><title lang=\"en\">Everyday Italian</title><author>Giada De Laurentiis</author><year>2005</year><price>30.00</price></book><book category=\"CHILDREN\"><title lang=\"en\">Harry Potter</title><author>J K. Rowling</author><year>2005</year><price>29.99</price></book><book category=\"WEB\"><title lang=\"en\">XQuery Kick Start</title><author>James McGovern</author><author>Per Bothner</author><author>Kurt Cagle</author><author>James Linn</author><author>Vaidyanathan Nagarajan</author><year>2003</year><price>49.99</price></book><book category=\"WEB\"><title lang=\"en\">Learning XML</title><author>Erik T. Ray</author><year>2003</year><price>39.95</price></book></bookstore>";
var doc, isIE;

// code for IE
if (window.ActiveXObject)
{
      doc=new ActiveXObject("Microsoft.XMLDOM");
      doc.async="false";
      doc.loadXML(xmlText);
      isIE = true;
}
// code for Mozilla, Firefox, Opera, etc.
else
{
      var parser=new DOMParser();
      doc=parser.parseFromString(xmlText,"text/xml");
      isIE = false;
}

var rootNode=doc.documentElement;

this.readChildrenIntoTree(rootNode.childNodes);
      
function readChildrenIntoTree(nodeList) {
      for (var n=0; n<nodeList.length; n++)
            {
                  var node = nodeList[n];
                  alert(node.nodeValue);
                  
                  if(node.hasChildNodes)
                    readChildrenIntoTree(node.childNodes);
            }
}
</script>
0
 
LVL 12

Expert Comment

by:jessegivy
ID: 17782803
Nice catch hbz,

The for loop you had was foremed poorly, syntax not javascript.  The "undefined" was printing because you didn't declare x as a variable, so the script couldn't find a variable called x.

Best Wishes,

Jesse
0
 
LVL 1

Author Comment

by:dbrownell83
ID: 17783337
thanks, i copied someone's js code thinking it was some special foreach syntax.  oops.

            readChildrenIntoTree:function(nodeList, treeNode) {
               for (var x=0; x < nodeList.length; x++)
               {
                 var node = nodeList[x];
                     alert(node);
                 alert(node.nodeValue);
                   alert(node.nodeName);
                   var tmpNode = new YAHOO.widget.TextNode(node, treeNode, false);
                    
                  if(node.hasChildNodes)
                      readChildrenIntoTree(node.childNodes, tmpNode);
               }
            }

This prints out:
node = [object Element]
node.nodeValue = null
node.nodeName = "child"

Hmm...
my XML has this sort of look:
<categories>
<child>Engineering
          <child>AeroSpace Engineering</child>
          <child>Computer Engineering</child>
          <child>Electrical Engineering</child>
</child>
</categories>

Does it matter that my inner nodes have the same tag as the outer ones?
0
 
LVL 1

Author Comment

by:dbrownell83
ID: 17783391
erm yeah...  it isnt properly formed.  i'll ask on the xml board.  thanks
0
 
LVL 5

Expert Comment

by:hbz
ID: 17802907

thank you for the points!

you should know, however, that for...in *IS* valid syntax in JS, for example "for (var i in arrayList)".   the nodelist object doesn't happen to support it.

- hbz
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Dynamic Dropdowns 15 33
innerHTML 7 35
Html CheckBox obtain Its Value 5 28
Javascript - Uncaught SyntaxError: Unexpected token } (Image Swap onclick) 12 53
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question