Thursday, September 27th, 2007
Ajaxian Featured Tutorial: Parsing XML with jQuery
<>p>Brian Reindel takes us through the steps of traversing an XML file using the jQuery JavaScript framework:The jQuery library has changed quite a bit since then, and I have decided to revisit jQuery and XML with an intermediate tutorial. Much of this tutorial is written as a response to questions I have received from other developers in regards to the February post. I hope you enjoy it.
Brian provides plenty of details and code examples to get you up to speed with harnessing jQuery’s power to traverse the XML tree:
$(function() {
$.ajax({
type: “GET”,
url: “dbug.xml”,
dataType: “xml”,
success: function(xml) {
/* Count elements */
var count = jXML.getCount(xml,{“Channel”:”channel”,”Item”:”item:has(title)”,”GUID”:”guid[isPermaLink]:lt(3)”});
alert( count["Channel"] + “, ” + count["Item"] + “, ” + count["GUID"] );
/* Return objects with a specific attribute */
var attribute = jXML.getAttribute(xml,{“GUID”:["guid","isPermaLink",null],”Channel”:["channel","id",null]});
alert( attribute["GUID"] + “, ” + attribute["Channel"] );
/* Return objects with a specific attribute value */
var attribute = jXML.getAttribute(xml,{“GUID”:["guid","isPermaLink","false"],”Channel”:["channel","id","channel_1"]});
alert( attribute["GUID"] + “, ” + attribute["Channel"] );
/* Return a number of objects randomized */
var random = jXML.getRandomObj(xml,{“Title”:["item:has(title) > title",null],”URL”:["item:has(link) > link",3]});
for (i = 0; i < random["Title"].length; i++) {
alert( $(random["Title"][i]).text() );
}
for (i = 0; i < random["URL"].length; i++) {
alert( $(random["URL"][i]).text() );
}
}
});
});
The tutorial includes full source code as well.
Related Content:
For those who don’t use jQuery, this fucntion should help… http://www.openjs.com/scripts/xml_parser/
horrified! JSON rules!
shitty XML , we dont need it
Rey, you are too good to me man. Thanks again for the link. I hope the Ajaxian crowd enjoys the tutorial. I just can’t get enough of jQuery :)
@cocotapioca – It would be more accurate to say we don’t want it … sometimes life forces it on you (and by life, I mean other people who don’t know better).
JSON is King, indeed. ….good to know about this tho
JSON is all well and nice but this kind of thing can be handy for a slew of front end widgets. For example, parsing an rss feed into a page on demand. Even more to the point they are pretty much the same, the only difference is that JSON is much easier to play with on the client side end, while you actually have to know how to program to parse XML and use it in the client side. All points aside however, anyone who has worked with the web longer than the average fan boy knows this – technologies do not disappear and more often than not, that sweet high paying job will force you to use them. Good job in the script man, I’m a prototype man myself but jQuery is def my number 2 :)
@Kevin – Those are some great points. Let’s face it, XML isn’t going anywhere anytime soon, so having both tricks in the bag is only going to make you a better programmer.
With that being said, check back on the site on Tuesday, October 2, and you will find a nice surprise.
We recently had to parse RSS feeds from mySpace using nothing more than jQuery and we found a slightly quicker solution – jFeed. I would definitely recommend checking it out. As for our widget, you’re all free to grab the sources to see how we tackled the problem:
http://blarnee.com/wp/myspace-blog-reader-widget-using-jquery-ajax-and-greybox/
Here is a new Jquery plugin for parsing XML with Javascript/jQuery – Parse XML with Javascript – jParse: jQuery Plugin for Parsing XML