I want to read the following XML using JQuery. The Jquery should read the XML and display the following in HTML, all the following should be linked

News
Articles 
  ---Destinations
  ---Epics
Tuesday Night Bouldering

My XML Looks like below...

    <category>
     <catId>96</catId>
     <title>News</title>
 </category>
 <category>
     <catId>97</catId><title>Articles</title>
        <category>
            <catId>101</catId>
            <title>Destinations</title>
        </category>
        <category>
            <catId>102</catId>
            <title>Epics</title>
        </category>
 </category>
 <category>
    <catId>129</catId>
    <title>Tuesday Night Bouldering</title>
</category>

I want to read the following XML using JQuery. The Jquery should read the XML and display the following in HTML, all the following should be linked

News
Articles 
  ---Destinations
  ---Epics
Tuesday Night Bouldering

My XML Looks like below...

    <category>
     <catId>96</catId>
     <title>News</title>
 </category>
 <category>
     <catId>97</catId><title>Articles</title>
        <category>
            <catId>101</catId>
            <title>Destinations</title>
        </category>
        <category>
            <catId>102</catId>
            <title>Epics</title>
        </category>
 </category>
 <category>
    <catId>129</catId>
    <title>Tuesday Night Bouldering</title>
</category>

• javascript
• jquery
• xml
• jquery-ui

4 Answers 4

You can do this recursively.

But you need to make your xml have a root node.

here is a function for your specs (it is core jQuery so I assume the mobile version can cope with it)

function CategoryToUl(xml){
    var categories = xml.children('category');
    if (categories.length > 0)
    {
        var ul = $('<ul/>');
        categories.each(function(){
            var $this = $(this);
            var li = $('<li/>');
            var a = $('<a/>',{
                text: $this.children('title').text(),
                href: '#' + $this.children('catId').text()
            });
            li.append(a);
            li.append( CategoryToUl( $this ) );
            ul.append(li);
        });
        return ul;
    }
    return null;
}

and here is how to call it

$.ajax({
    url:'path-to.xml',
    dataType: 'xml',
    success: function(data){
        var xml = $(data);
        $('#container').append( CategoryToUl(xml.children()) );
    }
});

demo at http://www.jsfiddle/gaby/UC2dM/1/

It creates a structure like this

<ul>
    <li><a href="#96">News</a></li>
    <li><a href="#97">Articles</a>
        <ul>
            <li><a href="#101">Destinations</a></li>
            <li><a href="#102">Epics</a></li>
        </ul></li>
    <li><a href="#129">Tuesday Night Bouldering</a></li>
</ul>

jQuery.ajax({
    type: "GET",
    url: 'your_xml.xml', //edit this to be the path of your file
    dataType: ($.browser.msie) ? "text/xml" : "xml",
    success: function(xml) {
        var xml2 = load_xml(xml);
        var i=0;
        $(xml2).find('category').each(function(){
            $(xml2).find('catID').each(function(){ 
                //output of catID will be $(this).text()
                alert($(this).text())
            });
            $(xml2).find('title').each(function(){
                //output of title will be $(this).text()
                alert($(this).text())
            });
        });
    }
});

and the load XML function:

function load_xml(msg) {   
    if ( typeof msg == 'string') {
        if (window.DOMParser)//Firefox
        {
            parser=new DOMParser();
            data=parser.parseFromString(text,"text/xml");
        }else{ // Internet Explorer
            data=new ActiveXObject("Microsoft.XMLDOM");
            data.async="false";
            data.loadXML(msg);
        }
    } else {
        data = msg;
    }
    return data;
}   

sorry, I feel I should explain - this load_xml() function will work crossbrowser (IE, FireFox, Chrome, Safari etc).

JQuery gets as easy as this:

var xml = your xml...
JQuery(xml).find('category').each(function(){
        JQuery(xml).find('catID').each(function(){                
            alert($(this).text())
        });
});

This is the correct AJAX

jQuery.ajax({
    type: "GET",
    url: 'your_xml.xml', //edit this to be the path of your file
    dataType: ($.browser.msie) ? "text/xml" : "xml",
    success: function(xml) {
        var xml2 = load_xml(xml);
        var i=0;
        $(xml2).find('category').each(function(){
            var category = $(this);
            category.find('catID').each(function(){ 
                //output of catID will be $(this).text()
                alert($(this).text())
            });
            category.find('title').each(function(){
                //output of title will be $(this).text()
                alert($(this).text())
            });
        });
    }
});