Parse XML recursively using JQuery

Question

<script>         
$(document).ready(function(){
            var xml = "<root> \
                        <method name='A'> \
                        <childcall name='B'></childcall> \
                        <childcall name='C'></childcall> \
                        </method> \
                        <method name='B'> \
                        <childcall name='D'></childcall> \
                        </method> \
                        <method name='C'> \
                        <childcall name='D'></childcall> \
                        <childcall name='E'></childcall> \
                        </method> \
                        </root>";

            var data = $.parseXML(xml);
            console.log(data);
            $(data).find('method').each(function(){
                var name = $(this).attr('name');
                $('<div class="items"></div>').html('<a href="'+name+'">'+name+'</a>').appendTo('#page-wrap');

            });
        });

     </script>
</head>
<body>
    <div id="page-wrap"></div>
</body>
</html>

This code outputs A B C for parent method tag. The required output is A B C B D C D E. How do I traverse the child nodes recursively to get the required output? Would that be a depth-first-search?

palaѕн · Accepted Answer · 2013-04-09 12:18:53Z

1

Try this:

// Loop through the parent items
$(data).find('method').each(function () {
    var name = $(this).attr('name');
    $('<div class="items"></div>').html('<a href="' + name + '">' + name + '</a>').appendTo('#page-wrap');

    // Loop through the child items
    $(this).find('childcall').each(function () {
        name = $(this).attr('name');
        $('<div class="items"></div>').html('<a href="' + name + '">' + name + '</a>').appendTo('#page-wrap');
    });
});

answered Apr 9, 2013 at 12:18

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

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

Comments

0xFK · Accepted Answer · 2015-11-11 00:42:18Z

if someone interested building all nested nodes , the updated code is below

$(xml).find('thymeSiteMap').each(function () {
    var name = $(this).attr('en');
    var id= $(this).attr('id');
    console.log(id);
    $('<div class="items shift" id="'+id+'"></div>').html('<a href="' + name + '">' + name + '</a>').appendTo('#page-wrap');

    // Loop through the child items
    $(this).find('thymeNode').each(function () {
    	
    	var parent = $(this).parent().attr('id');
    	console.log("me "+$(this).attr('id') +" my parent "+parent);
        name = $(this).attr('en');
        var divname="div#"+parent+".items";
        console.log(divname);
        var id= $(this).attr('id');
    
        $('<div class="items shift" id="'+id+'"></div>').html('<a href="' + name + '">' + name + '</a>').appendTo(divname);
    });

<!doctype html>
    <html >
      <head>
        <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
       
       <style>
       
       .shift{
       	
       	position:relative;
       	left:20px;
       }
       
       
       </style>
      </head>
      <body>
        <div id="page-wrap" class="shift"></div>
 
      </body>
    </html>

Collectives™ on Stack Overflow

Parse XML recursively using JQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related