🔧 Smart XML to Javscript-Object converter
JavaScript CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
Build
Resources
Source
Util
.gitignore
Example.Minimal.html
Example.MooTools.html
Example.html
LICENSE.md
README.md
build.xml
package.yml
screenshot.jpg

README.md

XmlToJsObject

XmlToJsObject is a free, easy-to-use utility to convert XML-Documents/XML-Strings to Javacript-Objects

Screenshot

Features

  • Easy XML to JS-Object conversion like JSON to JS-Object
  • Written in Pure-Javascipt (standalone - no framework like jQuery or MooTools required!)
  • Supports XML-Documents (from AJAX/XHR Requests) as well as XML-Strings
  • Smart-Mode automatically merges nodes+attributes for a much easier handling of config files
  • Ultra lightweight: only 3.9kB of Code (uncompressed); 1.64kB (yui compressed)
  • Well commented sourcecode allows easy user modifications/custom extensions
  • Native integration into MooTools (Object.fromXML)

Demo

The following Examples require the JSON.stringify method (supported by all modern browsers)

Minimal Example

This is a minimal example how to convert a XML-String into a Javascript Object (Pure Javascript Version)

#HTML
<head>
...
<!-- Include XmlToJsObject -->
<script type="text/javascript" src="Build/XmlToJsObject.yui.js"></script>

<!-- Example Code -->   
<script type="text/javascript">
    window.onload = (function(){
        // some valid! xml data given as string/xml-node/xml-document
        var testdata = ...

        // covnvert testdata to Js-Object (Smart Mode)
        var dataObject = XmlToJsObject(testdata);

        // Display Human-Readable Object
        document.getElementById('output').innerHTML = JSON.stringify(dataObject, null, 4);
    });
</script>
...
</head>
<body>
...
<pre id="output"></pre>
...

MooTools Examples

How to use

Example, how to use XmlToJsObject with MooTools (http://static.andidittrich.de/XmlToJsObject/Example.MooTools.html)

#JS
window.addEvent('domready', function(){
    // get local stored testdata
    var testdata1 = document.id('Testdata1').get('text');

    // == Example 1 ===============================================
    // covnvert testdata to Js Object (Normal Mode + Smart Mode)
    var dataObject1 = Object.fromXML(testdata1);

    // Display Human-Readable Objects
    document.id('output1').set('text', JSON.stringify(dataObject1, null, 4));

    // == Example 2 ===============================================
    // get testdata as DOM-Element-Node and covnvert it into Js Object (Normal Mode)
    var domNode = (new DOMParser()).parseFromString(testdata1, 'text/xml').firstChild;
    var dataObject2 = Object.fromXML(domNode, false);

    // Display Human-Readable Objects
    document.id('output2').set('text', JSON.stringify(dataObject2, null, 4));

    // == Example 3 ===============================================
    // create new xhr request
    var myRequest = new Request({
        url: 'Resources/Testdata2.xml',
        method: 'get',
        onSuccess: function(responseText, responseXMLDocument){
            // directly convert a XML Document
            var dataObject3 = Object.fromXML(responseXMLDocument);

            // Display Human-Readable Objects
            document.id('output3').set('text', JSON.stringify(dataObject3, null, 4));
        } 
    });
    myRequest.send();

    // == Show Example Code ===============================================
    document.id('codeOutput').set('text', document.id('JSCode').get('text').replace(/^\t\t/gm, ''));
    // Highlight Example Code
    document.id('codeOutput').light({language: 'js', theme: 'git'});
});

Example.html Code

The working example can be found here Note: The Example requires MooTools (used to access the DOM Elements); JSON.stringify is supported by all modern browsers

#JS
window.addEvent('domready', function(){
    // get local stored xml testdata
    var testdata1 = document.id('Testdata1').get('text');
    var testdata2 = document.id('Testdata2').get('text');

    // covnvert testdata to Js Object (Normal Mode + Smart Mode)
    var dataObject1normal = XmlToJsObject(testdata1, false);
    var dataObject1smart = XmlToJsObject(testdata1, true);

    // covnvert testdata to Js Object (Smart Mode default)
    var dataObject2 = XmlStringToJsObject(testdata2);

    // Display Human-Readable Objects
    document.id('output1').set('text', JSON.stringify(dataObject1smart, null, 4));
    document.id('output2').set('text', JSON.stringify(dataObject1normal, null, 4));
    document.id('output3').set('text', JSON.stringify(dataObject2, null, 4));
});

Available Methods

XmlToJsObject

Pure Javascript Implementation

#JS
XmlToJsObject(data [, smartMode=true])

Description: Converts a XML-String, XMLNode or XMLDocument into a Javascript-Object

data Type: mixed ( String, XMLDocument, XMLNode ) A valid XML-String, XMLNode or XMLDocument Node containing various child nodes and attributes

smartMode Type: Boolean Optional (default=true) - Merge attribute names with node-names

Object.fromXML (MooTools)

Native MooTools implementation: automatically available when using MooTools on your page!

#JS
Object.fromXML(data [, smartMode=true])

Description: Converts a XML-String, XMLNode or XMLDocument into a Javascript-Object

data Type: mixed ( String, XMLDocument, XMLNode ) A valid XML-String, XMLNode or XMLDocument Node containing various child nodes and attributes

smartMode Type: Boolean Optional (default=true) - Merge attribute names with node-names

Tested With

  • Firefox 27.0.1
  • Chrome 33.0.1750.117
  • Internet Explorer 11.0.9600.16518
  • Safari 5.1.7 (Windows)
  • Android 4.3 (WebView)

Browser compatibility

The XmlToJsObject Utility requires the DOMParser object. If you want to support earlier versions of the InternetExplorer you can write a fallback using new ActiveXObject("Microsoft.XMLDOM") instead of the DOMParser.

Compatibility Reference: https://developer.mozilla.org/en-US/docs/Web/API/DOMParser

  • Chrome 1.0+
  • Safari osx+ios (WebKit) 3.2+
  • Internet Explorer 9+
  • Firefox 1.7+
  • Opera 8+
  • Android-Webview 4.3 (Webkit Engine)

License

XmlToJsObject is licensed under The MIT License (X11)