What is this?

The XML to JSON Plugin (jQuery.xml2json) is a script you can use to convert simple XML into a JSON object.

Convert this...

<xml>
 <message>Hello world</message>
</xml>

...into this:

{
 message: 'Hello world';
}

How does it work?

With XML in a string

Click here to test this code
var xml = '<xml><message>Hello world</message></xml>';
var json = $.xml2json(xml);
alert(json.message);

With XML loaded via Ajax

Click here to test this code
$.get('data/hello.xml', function(xml){
 var json = $.xml2json(xml);
 alert(json.message);
});

Why convert XML to JSON?

Those of you with a little more jQuery experience will know that in simple cases (such as the above) we could use jQuery DOM traversing functionality to achieve the same result without the need of a plugin:

alert($('<xml><message>Hello world</message></xml>').find('message').text());
Hint: you do not need this plugin if that's as complex as your XML will get.

However, jQuery's DOM traversing can soon become a little tiring if...
A. you frequenly process XML responses from Ajax calls
B. you parse complex/large XML documents (such as RSS feeds)
...in which case this plugin is perfect for you.

I made this plugin for my own convenience when processing XML files and I hope the benefits will become more aparent as you work your way through the examples on this page.

Consider the following XML file (data/animals.xml):

<?xml version="1.1" encoding="utf-8"?>
<animals>
 <dog color='Black'>
  <name>Rufus</name>
  <breed>labrador</breed>
 </dog>
 <dog breed='whippet'>
  Adopted
  <name>Marty</name>
 </dog>
 <cat color="White">
  <name>Matilda</name>
 </cat>
</animals>

Simple Mode

Click here to test this code
$.get('data/animals.xml', function(xml){
 var animals = $.xml2json(xml);
 alert(animals.dog[1].name +'/'+ animals.dog[1]);
});

In simple mode, the plugin will only use arrays and objects when necessary. It also means you don't have to use .text (or .nodeValue) to retrieve the text of each node.

Resulting JSON object

{
 dog:[
  { name:'Rufus', breed:'labrador', color:'Black' },
  { text:'Adopted', name:'Marty', breed:'whippet' }
 ],
 cat:{ name:'Matilda', color:'White'}
}

Accessing the data

animals.dog === '{Array}';
animals.dog[0] === '{Object}'; // No text in node
animals.dog[0].name === 'Rufus';
animals.dog[0].color === 'Black';// from attribute
animals.dog[0].breed === 'labrador';
animals.dog[1] === 'Adopted'; // text in node (animals.dog[1].text)
animals.dog[1].name === 'Marty';
animals.dog[1].breed === 'whippet';
animals.cat === '{Object}'; // only 1 cat, array not required
animals.cat.name === 'Matilda';
animals.cat.color === 'White';

Extended Mode

Click here to test this code
$.get('data/animals.xml', function(xml){
 var animals = $.xml2json(xml, true);
 alert(animals.dog[1].name[0].text +'/'+ animals.dog[1].text);
});

In extended mode, the plugin converts each and every node into an array.

Resulting JSON object

{
 dog:[
  { name:['Rufus'], breed:['labrador'], color:'Black' },
  { text:'Adopted', name:['Marty'], breed:'whippet' }
 ],
 cat:[
  { name:'Matilda', color:'White'}
 ]
}

Accessing the data

animals.dog === '{Array}';
animals.dog[0] === '{Object}'; // No text in node
animals.dog[0].name[0].text === 'Rufus';
animals.dog[0].color[0].text === 'Black';// from attribute
animals.dog[0].breed[0].text === 'labrador';
animals.dog[1] === '{Object}'; // node text stored in '.text'
animals.dog[1].text === 'Adopted'; // not available in animals.dog[1]
animals.dog[1].name[0].text === 'Marty';
animals.dog[1].breed[0].text === 'whippet';
animals.cat === '{Array}';
animals.cat[0] === '{Object}';
animals.cat[0].name[0].text === 'Matilda';
animals.cat[0].color[0].text === 'White';

This is how the plugin works in simple mode (default) - which represents the XML data in a structure that is as simple and easy to use as possible.

FILE: data/notes.xml FILE: data/menu.xml FILE: data/catalog.xml

Why do this?

The benefit of this behaviour is that arrays are only used when necessary.

So you can do this...
json.node
...instead of this:
json.node[0].text

This is how the plugin works in extended mode - where each and every node is an array.

FILE: data/notes.xml FILE: data/menu.xml FILE: data/catalog.xml

This is what I need. How do I get it?

Simple, just add 'true' to the second parameter when you call the plugin, like this:

// ... get your xml data
var json = $.xml2json(xml, true /* extended structure */);
// ... do some stuff

You can load and format an RSS feed just like you would work on any other XML file. The plugin loads the structure onto an easy to use JSON object so you can easily loop through every item in the rss channel like this:

$.get('data/rss.xml', function(xml){
  $('#test-rss').html(''); /* clear result div */
  var rss = $.xml2json(xml);
  $.each(rss.channel.item, function(i, item){
    $('#test-rss').append('<p>'
      +'<strong>'+item.title+'</strong><br/>'
      +'<u>Description</u>: '+item.description+'<br/>'
      +'<u>Author</u>: '+item.author+'<br/>'
      +'<small style="color:green;">'+item.link+'</small>'
    +'</p>');
  });
});

Copy code | RUN TEST »

This is div#test-rss. Results of the test above will be shown here

View Structure

In simple mode

FILE: data/rss.xml

In extended mode

FILE: data/rss.xml

Download

Package: v1.3 xml-to-json.zip
previous versions -
Files: These are the individual required files (already included in the zip package above)
jQuery: jquery-1.9.1.min.js (see jQuery.com)

Installation

<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript" language="javascript"></script>
<script src="jquery.xml2json.js" type="text/javascript" language="javascript"></script>
    

Support

Quick Support Links: Help me! | Report a bug | Suggest new feature

Support for this plugin is available through the jQuery Mailing List. This is a very active list to which many jQuery developers and users subscribe.
Access to the jQuery Mailing List is also available through the Nabble Forums, the jQuery Google Group and the official project page.

Related Resources

As mentioned in the introduction, you may not need this plugin if all you're going to be doing is some very simple ad-hoc XML handling. Whether or not that is the case, I thoroughly recommend this amazing article:
Easy XML handling with jQuery (without a plugin)

Feel free to post suggestions in the jQuery Mailing List. (Yes, I will check it!)

Give credit where credit is due...

If we've missed anyone (anyone!) please contact us (info at fyneworks.com) and we'll make sure to give credit where credit is due.

What's the catch?

There's no catch. Use it, abuse it - even take it apart and modify it if you know what you're doing. You don't have to, but if you're feeling generous you can link back to this website (instructions below).

Attribute this work

Attribution link: © Fyneworks.com
HTML Code:

License Info

Multiple File Upload Plugin by Fyneworks.com is licensed, as jQuery is, under the MIT License. Creative Commons License

Multiple File Upload Plugin

Provides a non-obstrusive way of selecting multiple files for upload. Supports validation and form plugins.

Star-Rating Plugin

Creates a non-obstrusive star-rating control from any set of radio boxes. Features include half/partial stars and an API for programmatic control. Supports the validation plugin.

XML to JSON

Convert XML to JSON and read data from XML files/RSS feeds with ease.

CKEditor Plugin

jQuery plugin for non-obstrusive integration of textareas with CKEditor.

FCKEditor Plugin

jQuery plugin for non-obstrusive integration of textareas with FCKEditor.
OLD! It is recommended you upgrade to CKEditor (above).

Codepress Plugin

jQuery plugin for non-obstrusive integration of textareas with Codepress.