The XML to JSON Plugin (jQuery.xml2json) is a script you can use to convert simple XML into a JSON object.
Convert this...
|
...into this:
|
With XML in a stringClick here to test this code
|
With XML loaded via AjaxClick here to test this code
|
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());
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>
$.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
|
Accessing the data
|
$.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
|
Accessing the data
|
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 |
The benefit of this behaviour is that arrays are only used when necessary.
So you can do this...
|
...instead of this:
|
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 |
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:
|
This is div#test-rss. Results of the test above will be shown here |
In simple modeFILE: data/rss.xml |
In extended modeFILE: data/rss.xml |
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) |
<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>
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.
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!)
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.
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).
Attribution link: | © Fyneworks.com |
HTML Code: |
Multiple File Upload Plugin by Fyneworks.com is licensed, as jQuery is, under the MIT License. | |
Copyright © 2008 Fyneworks.com Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. |
Multiple File Upload PluginProvides a non-obstrusive way of selecting multiple files for upload. Supports validation and form plugins. Star-Rating PluginCreates 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 JSONConvert XML to JSON and read data from XML files/RSS feeds with ease. |
CKEditor PluginjQuery plugin for non-obstrusive integration of textareas with CKEditor. FCKEditor Plugin
jQuery plugin for non-obstrusive integration of textareas with FCKEditor.
Codepress PluginjQuery plugin for non-obstrusive integration of textareas with Codepress. |
Multiple File Upload, Star Rating, CKEditor XML to JSON | [back to top] | ||
jQuery Plugins
by Fyneworks.com
Licensed under the MIT License and the GPL License (2.0). |
Tested with jQuery 1.9 on: IE6, IE7, IE8, FF, Chrome, Opera and Safari |