Skip to main content

jQuery How to Read XML

By Sam Deering

JavaScript

Share:

😳 Ever felt a little embarassed sharing your JavaScript? Let's fix it.

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/

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

💁‍♀️ Fun Fact: Python was ranked #2 on a recent highest paid coders list. *


🤓 Ok. When did a code editor from Microsoft become kinda cool!?