Jquery Parse XML

Question

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>

Solution 1

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.net/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>

Solution 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 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).

Comments

[user580950]

Hi will this load XML function work in Jquery Mobile i mean on iphone ?

[user580950]

Hi Sorry i should have told that i am developing the JQuerymobile application so i dont think load_xml will work ?

[user580950]

Ok this helps this is my function to read and display it $(xml).find('category').each(function(){ var id_text = $(this).attr('catID') var name_text = $(this).find('title').text() $('<li></li>') .html(name_text + ' (' + id_text + ')') .appendTo('#update-target ol'); Now the issue is all the subcategories are also displayed in one singe line so now its displaying like News Articles Destin Epics etc it should check if it has subcat and display it using ">>>"