jQuery Read XML Document

In a long time ago, using javascript to read an XML Document is a suffering job. Like this:

note.xml:

<note>
    <to>Tove</to>
    <from>Jani</from>
    <heading>Reminder</heading>
    <body>Don't forget me this weekend!</body>
</note>

Script:

if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "note.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
document.getElementById("to").innerHTML = xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML = xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML = xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;

In this script, There are many getElementsByTagName(“xxx”)[0] and childNodes[0]. It just read a simple XML. If read a more complex XML? It can make me crazy. Now, We can use jQuery to read XML file.

jQuery selector make select HTML more easy, but jQuery selector also can read XML document. Not only HTML document.

Now, I am going to show you how to read XML by jQuery. In this example, I will display a list of book title and book author.

Example:
XML file copy form Microsoft

books.xml:

<?xml version="1.0"?>
<catalog>
  <book id="bk101">
    <author>Gambardella, Matthew</author>
    <title>XML Developer's Guide</title>
    <genre>Computer</genre>
    <price>44.95</price>
    <publish_date>2000-10-01</publish_date>
    <description>An in-depth look at creating applications
with XML.</description>
  </book>
  <book id="bk102">
    <author>Ralls, Kim</author>
    <title>Midnight Rain</title>
    <genre>Fantasy</genre>
    <price>5.95</price>
    <publish_date>2000-12-16</publish_date>
    <description>A former architect battles corporate zombies,
an evil sorceress, and her own childhood to become queen
of the world.</description>
  </book>
  <book id="bk103">
    <author>Corets, Eva</author>
    <title>Maeve Ascendant</title>
    <genre>Fantasy</genre>
    <price>5.95</price>
    <publish_date>2000-11-17</publish_date>
    <description>After the collapse of a nanotechnology
society in England, the young survivors lay the
foundation for a new society.</description>
  </book>
  <book id="bk104">
    <author>Corets, Eva</author>
    <title>Oberon's Legacy</title>
    <genre>Fantasy</genre>
    <price>5.95</price>
    <publish_date>2001-03-10</publish_date>
    <description>In post-apocalypse England, the mysterious
agent known only as Oberon helps to create a new life
for the inhabitants of London. Sequel to Maeve
Ascendant.</description>
  </book>
  <book id="bk105">
    <author>Corets, Eva</author>
    <title>The Sundered Grail</title>
    <genre>Fantasy</genre>
    <price>5.95</price>
    <publish_date>2001-09-10</publish_date>
    <description>The two daughters of Maeve, half-sisters,
battle one another for control of England. Sequel to
Oberon's Legacy.</description>
  </book>
  <book id="bk106">
    <author>Randall, Cynthia</author>
    <title>Lover Birds</title>
    <genre>Romance</genre>
    <price>4.95</price>
    <publish_date>2000-09-02</publish_date>
    <description>When Carla meets Paul at an ornithology
conference, tempers fly as feathers get ruffled.</description>
  </book>
  <book id="bk107">
    <author>Thurman, Paula</author>
    <title>Splish Splash</title>
    <genre>Romance</genre>
    <price>4.95</price>
    <publish_date>2000-11-02</publish_date>
    <description>A deep sea diver finds true love twenty
thousand leagues beneath the sea.</description>
  </book>
  <book id="bk108">
    <author>Knorr, Stefan</author>
    <title>Creepy Crawlies</title>
    <genre>Horror</genre>
    <price>4.95</price>
    <publish_date>2000-12-06</publish_date>
    <description>An anthology of horror stories about roaches,
centipedes, scorpions  and other insects.</description>
  </book>
  <book id="bk109">
    <author>Kress, Peter</author>
    <title>Paradox Lost</title>
    <genre>Science Fiction</genre>
    <price>6.95</price>
    <publish_date>2000-11-02</publish_date>
    <description>After an inadvertant trip through a Heisenberg
Uncertainty Device, James Salway discovers the problems
of being quantum.</description>
  </book>
  <book id="bk110">
    <author>O'Brien, Tim</author>
    <title>Microsoft .NET: The Programming Bible</title>
    <genre>Computer</genre>
    <price>36.95</price>
    <publish_date>2000-12-09</publish_date>
    <description>Microsoft's .NET initiative is explored in
detail in this deep programmer's reference.</description>
  </book>
  <book id="bk111">
    <author>O'Brien, Tim</author>
    <title>MSXML3: A Comprehensive Guide</title>
    <genre>Computer</genre>
    <price>36.95</price>
    <publish_date>2000-12-01</publish_date>
    <description>The Microsoft MSXML3 parser is covered in
detail, with attention to XML DOM interfaces, XSLT processing,
SAX and more.</description>
  </book>
  <book id="bk112">
    <author>Galos, Mike</author>
    <title>Visual Studio 7: A Comprehensive Guide</title>
    <genre>Computer</genre>
    <price>49.95</price>
    <publish_date>2001-04-16</publish_date>
    <description>Microsoft Visual Studio 7 is explored in depth,
looking at how Visual Basic, Visual C++, C#, and ASP+ are
integrated into a comprehensive development
environment.</description>
  </book>
</catalog>

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>jQuery Read XML Sample</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
  </script>
  <script type="text/javascript">
      $(function(){
          $.ajax({
              url: 'books.xml',
              dataType: 'xml',
              success: function(xml){
                  //Use jQuery to read XML Document
                  var $books = $(xml).find("book");
                  //display all book title and author
                  $.each($books, function(i, book){
                      var author = $(book).children("author").text();
                      var bookName = $(book).children("title").text();
                      var li = $("<li>").text(bookName + " - " + author);
                      $("#books").append(li);
                  });
             }
        });
    });
  </script>
  </head>
  <body>
    <ul id="books">
    </ul>
  </body>
</html>

In function(i, book) book is not a jQuery object. It is a XML Document object, So I need to convert XML Document object to jQuery object again.

Get book title and author:

var author = $(book).children("author").text();
var bookTitle = $(book).children("title").text();

Create a li DOM object and append text:

var li = $("<li>").text(bookName + " - " + author);

Append li DOM object to ul DOM object:

$("#books").append(li);

Result:

<ul id="books">
  <li>XML Developer's Guide - Gambardella, Matthew</li>
  <li>Midnight Rain - Ralls, Kim</li>
  <li>Maeve Ascendant - Corets, Eva</li>
  <li>Oberon's Legacy - Corets, Eva</li>
  <li>The Sundered Grail - Corets, Eva</li>
  <li>Lover Birds - Randall, Cynthia</li>
  <li>Splish Splash - Thurman, Paula</li>
  <li>Creepy Crawlies - Knorr, Stefan</li>
  <li>Paradox Lost - Kress, Peter</li>
  <li>Microsoft .NET: The Programming Bible - O'Brien, Tim</li>
  <li>MSXML3: A Comprehensive Guide - O'Brien, Tim</li>
  <li>Visual Studio 7: A Comprehensive Guide - Galos, Mike</li>
</ul>

XML Developer’s Guide – Gambardella, Matthew
Midnight Rain – Ralls, Kim
Maeve Ascendant – Corets, Eva
Oberon’s Legacy – Corets, Eva
The Sundered Grail – Corets, Eva
Lover Birds – Randall, Cynthia
Splish Splash – Thurman, Paula
Creepy Crawlies – Knorr, Stefan
Paradox Lost – Kress, Peter
Microsoft .NET: The Programming Bible – O’Brien, Tim
MSXML3: A Comprehensive Guide – O’Brien, Tim
Visual Studio 7: A Comprehensive Guide – Galos, Mike

jQuery Read XML Document

Recommended To You