Copyright from: www.kumarchetan.com
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
LAMP Web Development Blog http://www.kumarchetan.com/blogMy first Android App or how to develop an Android App using PhoneGap and jQuery? http://www.kumarchetan.com/blog/2012/01/14/my-first-android-app-or-how-to-develop-an-android-app-using-phonegap-and-jquery/How not to do a CI controller? – Tips to develop CodeIgniter Controllers http://www.kumarchetan.com/blog/2011/12/11/how-not-to-do-a-ci-controller-tips-to-develop-codeigniter-controllers/
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 = '', //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); } );</pre> <p style="margin-top: 1.2em; margin-bottom: 1.2em; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; font-family: 'lucida grande', 'liberation sans', verdana, arial, helvetica, sans-serif; background: rgb(255, 255, 255);"> You can see a complete example on <a title="A bare minimum example of parsing XML using jQuery" href="https://github.com/kumarldh/jquery-xml-parser-example" target="_blank" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; color: rgb(0, 0, 0); background: transparent;">this git page</a> and check out the code as well. Things to note here:</p> <ul style="margin: 0px 0px 1.5em 1em; padding: 0px; border: 0px; outline: 0px; font-size: 12px; vertical-align: baseline; list-style: square; font-family: 'lucida grande', 'liberation sans', verdana, arial, helvetica, sans-serif; background: rgb(255, 255, 255);"> <li style="margin: 0px 0px 0px 1em; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">You can use <a title="Basic filters for using with selectors in jQuery" href="http://api.jquery.com/category/selectors/basic-filter-selectors/" target="_blank" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; color: rgb(0, 0, 0); background: transparent;">filters</a> with selectors.</li> <li style="margin: 0px 0px 0px 1em; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">You can find() a node/element and then you have all the attributes available it in <strong style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><em style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">“attributes”</em></strong> list.</li> <li style="margin: 0px 0px 0px 1em; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">You can traverse the list or use <strong style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><a title="Get the value of an attribute for the first element in the set of matched elements." href="http://api.jquery.com/attr/" target="_blank" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; color: rgb(0, 0, 0); background: transparent;">.attr()</a></strong> to actually find and use an attribute.</li> </ul> </div>
No comments:
Post a Comment