JavaScript

jQuery How to Read XML

Sam Deering
Share

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 jQuery XML Parsing
[js]
$(request.responseXML).find("marker").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/