Thursday, September 27th, 2007

Ajaxian Featured Tutorial: Parsing XML with jQuery

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() {
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.

Posted by Rey Bango at 7:30 am

4.1 rating from 59 votes


Comments feed TrackBack URI

For those who don’t use jQuery, this fucntion should help…

Comment by Binny V A — September 27, 2007

horrified! JSON rules!

Comment by Setti — September 27, 2007

shitty XML , we dont need it

Comment by cocotapioca — September 27, 2007

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 :)

Comment by Brian — September 27, 2007

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

Comment by Marat Denenberg — September 27, 2007

JSON is King, indeed. ….good to know about this tho

Comment by Mark Holton — September 28, 2007

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 :)

Comment by Kevin Miller — September 28, 2007

@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.

Comment by Brian — September 29, 2007

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:

Comment by legacye — February 28, 2009

Here is a new Jquery plugin for parsing XML with Javascript/jQuery – Parse XML with Javascript – jParse: jQuery Plugin for Parsing XML

Comment by bloggingdev — November 16, 2009

Leave a comment

You must be logged in to post a comment.