JQuery Parse XML

Question

I want to read the following XML using jQuery. JQuery should read the XML and display the following in HTML, all of the following should be related

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>

Answer 1

You can do this recursively.

But you need your xml to have the root root.

here is a function for your specifications (this is the core of jQuery, so I assume the mobile version will handle 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's what 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.net/gaby/UC2dM/1/

---

He 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>

Answer 2

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 XML load 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;
}   

, , - load_xml() crossbrowser (IE, FireFox, Chrome, Safari ..).

Answer 3

JQuery , :

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

Answer 4

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())
            });
        });
    }
});