JavaScript
Article

jQuery How to Read XML

By Sam Deering

Sometimes you just need a simple way of reading XML into your JavaScript code and creating variables from the XML items. Fortunately, jQuery can read xml easy! :) There are many plugins and code snippets available and here are the pick of the bunch!

In this post we cover following to guide you through your XML reading options:

  1. JavaScript XML Parsing
  2. jQuery XML Parsing
  3. Using jQuery.get() to get data from xml
  4. jQuery XML Plugin
  5. Tips on Parsing XML
  6. What JS functions generally don’t work well

Regular JavaScript XML Parsing

var xmlDoc = request.responseXML;
try // Build Markers, if available
{
  var markers = xmlDoc.getElementsByTagName("marker") ;
  for ( var i = 0; i < markers.length ; i++ ) {
    var point = {
      markers[i].getAttribute("lat")),
      markers[i].getAttribute("lng")
    };
  }
} catch(e) {}
[/js]

jQuery XML Parsing [js] $(request.responseXML).find(&quot;marker&quot;).each(function() { var marker = $(this); var point = { marker.attr("lat"), marker.attr("lng") }; });

Using jQuery.get() to get data from xml

$('Contact',xml).each(function() {
	srno = parseInt($(this).find("srno").text());
	empId = $(this).find("empid").text();
	name = $(this).find("name").text();
	contact = $(this).find("contact-data").text();
	type = $(this).find("type").text();
}

jParse jQuery XML Plugin

“jParse is a jQuery plugin that allows you to parse XML that was fetched with the jQuery .ajax method (making it fully customizable). It’s compatible with jQuery 1.4+, easy to use and ultra lightweight at only 4KB! Best of all, it’s compatible with all major browsers:”
Demo
Download
Source

Tips on Parsing XML

  • Try to limit your xml file size to less than 5mb to avoid the system slow up (if your file is too big you could try taking the xml data and turning it into a JSON object. There are lots of ways to do this, including a jQuery plugin)
  • If you are unfamiliar with XML synatax, check out the W3School’s rules on XML syntax.
  • Put your code inside the $(document).ready(function(){ //here }
  • You may find that some code works fine in FF and but does not work in IE (it seems IE has issues with the way jQuery handles XML on the local filesystem. If you upload the same code on a server it works without a problem)
  • If you are pulling data for dynamic pages then try to use relative path over absolute path

What jQuery XML commands commonly don’t work

var response = xmlHttp.responseText;
var sms = $(response).find('node').text();
var sms = $.parseXML(response).find('node').text();

Further readings: http://think2loud.com/reading-xml-with-jquery/

  • Pingback: jQuery How to Read XML | Web Design Northamptonshire()

  • ade

    Sam,

    It’s a long shot and a bit cheeky asking but I wondered if you could shed any light on how I would go about getting a value from a specific node and assign it to a variable. In jquery naturally.

    I have an xml file that I would like to assign various variables e.g

    xml node 1 (named height) – assign to var1

    xml node 2 (named length) – assign to var2

    xml node 3 – (named weight) – assign to var3

    etc.

    Any chance of help on this?. Ideally it would be brilliant if the xml could be re-loaded (say every 10 seconds) without refreshing the page but I haven’t clue how to do this at the moment.

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in JavaScript, once a week, for free.