VagrantRadio - How To Parse XML Using jQuery and Ajax

How To Parse XML Using jQuery and Ajax

Oct26

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

In this tutorial I will show you how to parse or process an xml document to display the data on a page in html form. It can be used to filter raw RSS feeds, set up a cool sitemap on your blog or even the groundwork for your own search auto complete.

Harnessing jQuery's Ajax API and making it do most of the work for us, leaves only the simple tasks of formatting how our data will displayed on the page while it is being parsed. This whole process is fairly easy to implement.

Getting Started

There are only two pre-requisites to this tutorial, an xml file and of course jQuery CDN linked in either your header or your footer.

In a new document, I've already laid out the page and created a un-ordered list to house our formatted data once it comes out the other end. The #loading div shows the loading animation on page load and once our function is ran, it displays it until the function is done.

In the Ajax call, we have four basic parameters. The type of call we are doing is a GET, basically telling the Ajax to get this file. The url is the path to the file we are getting the data from. The dataType states obviously which type of data is being grabbed, and finally success tells the Ajax what function or action to run once the xml is ready to be parsed.

Setting up the Ajax call

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("#loading").show();
  $.ajax({
    type: "GET",
    url: "sitemap.xml",
    dataType: "xml",
    success: parseXml
});
</script>
</head>
<body>
<div id="wrap">
<ul id="site_list">
<li id="loading"><img src="images/ajax-loader.gif" alt="loading" /> Loading Data..</li>
</ul>
</div>
</body>
</html>

Setting Up the Parse Function

For the parsing of the xml file we're going to set up a function that will search each parent element and output the specified child element's value as text using the find and each statement. In the xml file the format consists of a parent element being "url" and the child elements contained within such as this:


  http://www.vagrantradio.com/
  2009-10-22T00:42:12+00:00
  daily
1.0

In the first line of our function we will simply search each element of "url", then in the following lines append each instance of "loc" (being the url in our sitemap), to the #site_list unordered list with "li" tags and wrap it in a link. Once the function has finished loading the xml to the page, the loading animation is hidden.

function parseXml(xml) {
$(xml).find("url").each(function() {
//find each instance of loc in xml file and wrap it in a link
$("ul#site_list").append('<li>' + '<a href="' + $(this).find("loc").text() + '">' + $(this).find("loc").text() + '</a>' + '</li>');
$("#loading").hide();
 });
}
});

The Complete Code

Now we have an easy way to grab RSS feeds or XML documents and display them without a plug-in or sidebar widget. Below is the complete code with functions to parse and format XML documents. Don't forget to check out the demo to see how it works and download the provided source files zipped up so you can tear it apart and make something useful with it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("#loading").show();
  $.ajax({
    type: "GET",
    url: "sitemap.xml",
    dataType: "xml",
    success: parseXml
});
function parseXml(xml) {
$(xml).find("url").each(function() {
//find each instance of loc in xml file and wrap it in a link
$("ul#site_list").append('<li>' + '<a href="' + $(this).find("loc").text() + '">' + $(this).find("loc").text() + '</a>' + '</li>');
$("#loading").hide();
 });
}
});
</script>
</head>
<body>
<div id="wrap">
<ul id="site_list">
<li id="loading"><img src="images/ajax-loader.gif" alt="loading" /> Loading Data..</li>
</ul>
</div>
</body>
</html>

Thanks for reading!

Author: Jason Pant

Hi, I'm Jason. A front end developer from Grand Rapids, Michigan, and founder of VagrantRadio. I enjoy working with Css, jQuery, Php, learning new techniques in Photoshop and you should follow me on Twitter.

Enjoy this post?

If you enjoyed this post, please take a second to promote it via the various social bookmarking sites below. Don't forget to subscribe to the RSS Feed for more interesting articles. Thanks for visiting!