Parsing XML with jQuery using XPath or CSS path or CSS Selectors

Parsing XML with jQuery using XPath or CSS path or CSS Selectors

This is just a continuation to my previous post. I missed a very simple thing in the post. jQuery allows you to use CSS path, commonly known as CSS selectors, which is somewhat similar to XPath. For uninformed, XPath is a simpler way to query nodes in an XML document. You can even use filters with these selectors. Visit this doc page on jQuery doc website for more. Using the same code base I made following changes to access items node from my XML feed file.

//The xpath way
$(xml).find( "channel>item" ).each(
    function(){
        var item = $(this),
        title =  item.find('title').text(),
        link =  item.find('link').text(),
        itemid =  item.attr('id');//get an attribute
        console.log(title);
        console.log(link);
        console.log('The attribute value "' + itemid + '".');
    }
);

I have update the code on github page. How can you

Parsing XML with jQuery

Use jQuery to parse XML, get the code from github

I recently worked on a small Android App using PhoneGap & jQuery. The app did a very small task fetch the XML feed from my blog and display it. Simple. This meant parsing XML using jQuery. Most of the examples on web used this particular example in one form or another. Not all XML document are like record sets. For example a blog feed will have following structure

<?xml version="1.0" encoding="UTF-8"?>
<channel>
	<title>LAMP Web Development Blog</title>
	<link>http://www.kumarchetan.com/blog</link>
    <item id="item1" somerandomattribute="attribute value">
        <title>My first Android App or how to develop an Android App using PhoneGap and jQuery?</title>
        <link>http://www.kumarchetan.com/blog/2012/01/14/my-first-android-app-or-how-to-develop-an-android-app-using-phonegap-and-jquery/</link>
    </item>
    <item id="item2">
        <title>How not to do a CI controller? – Tips to develop CodeIgniter Controllers</title>
        <link>http://www.kumarchetan.com/blog/2011/12/11/how-not-to-do-a-ci-controller-tips-to-develop-codeigniter-controllers/</link>
    </item>
</channel>

The interesting part in this XML is that tags or nodes with similar names exist through out the document at different depth. This XML has attributes attached to its nodes. This is how a typical XML may look like. How do you actually parse this using jQuery? jQuery has find(). From the documentation

Given a jQuery object that represents a set of DOM elements, the .find() method allows us to search through the descendants of these elements in the DOM tree and construct a new jQuery object from the matching elements.

We can convert this XML into a jQuery object and then use find() to actually parse it. Here is a code snippet

var xml = '<?xml version="1.0" encoding="UTF-8"?> <channel>	<title ...>', //your XML string goes here 
feedtitle = $(xml).find('channel title:first'), //find first tag or node in XML that is named title
feedlink = $(xml).find('channel link:first'); //find first tag or node in XML that is named link
$(xml).find( "item" ).each(
	function(){
        var item = $(this), 
        title =  item.find('title').text(),
        link =  item.find('link').text(),
        itemid =  item.attr('id');//get an attribute
        //you can log all attributes
        //console.log(item[0].attributes);
    }
);

You can see a complete example on this git page and check out the code as well. Things to note here:

  • You can use filters with selectors.
  • You can find() a node/element and then you have all the attributes available it in “attributes” list.
  • You can traverse the list or use .attr() to actually find and use an attribute.