Treehouse

Convert XML to JSON with JavaScript

By on  

If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium.  The experience has been great:  using JavaScript to create easy to write, easy to test, native mobile apps has been fun.  My mobile app connects to numerous social network APIs, some of which only provide an XML response.  My mini "framework" uses JSON to dynamically create widgets so I've needed a way to turn XML into JSON.  I found many solutions but none of them worked.  After tweaking an existing function, I've found a solution that works great.

The JavaScript

It's important to point out that Titanium's Titanium.XML.DOMDocument object implements DOM2-level structures.  Here's the magic XML to JSON code:

// Changes XML to JSON
function xmlToJson(xml) {
	
	// Create the return object
	var obj = {};

	if (xml.nodeType == 1) { // element
		// do attributes
		if (xml.attributes.length > 0) {
		obj["@attributes"] = {};
			for (var j = 0; j < xml.attributes.length; j++) {
				var attribute = xml.attributes.item(j);
				obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
			}
		}
	} else if (xml.nodeType == 3) { // text
		obj = xml.nodeValue;
	}

	// do children
	if (xml.hasChildNodes()) {
		for(var i = 0; i < xml.childNodes.length; i++) {
			var item = xml.childNodes.item(i);
			var nodeName = item.nodeName;
			if (typeof(obj[nodeName]) == "undefined") {
				obj[nodeName] = xmlToJson(item);
			} else {
				if (typeof(obj[nodeName].push) == "undefined") {
					var old = obj[nodeName];
					obj[nodeName] = [];
					obj[nodeName].push(old);
				}
				obj[nodeName].push(xmlToJson(item));
			}
		}
	}
	return obj;
};

The major change I needed to implement was using attributes.item(j) instead of the attributes[j] that most of the scripts I found used.  With this function, XML that looks like:

<ALEXA VER="0.9" URL="davidwalsh.name/" HOME="0" AID="=">
	<SD TITLE="A" FLAGS="" HOST="davidwalsh.name">
		<TITLE TEXT="David Walsh Blog :: PHP, MySQL, CSS, Javascript, MooTools, and Everything Else"/>
		<LINKSIN NUM="1102"/>
		<SPEED TEXT="1421" PCT="51"/>
	</SD>
	<SD>
		<POPULARITY URL="davidwalsh.name/" TEXT="7131"/>
		<REACH RANK="5952"/>
		<RANK DELTA="-1648"/>
	</SD>
</ALEXA>

...becomes workable a JavaScript object with the following structure:

{
	"@attributes": {
		AID: "=",
		HOME:  0,
		URL: "davidwalsh.name/",
		VER: "0.9",
	},
	SD = [
		{
			"@attributes": {
				FLAGS: "",
				HOST: "davidwalsh.name",
				TITLE: A
			},
			LINKSIN: {
				"@attributes": {
					NUM: 1102
				}
			},
			SPEED: {
				"@attributes": {
					PCT: 51,
					TEXT: 1421
				}
			},
			TITLE: {
				"@attributes": {
					TEXT: "David Walsh Blog :: PHP, MySQL, CSS, Javascript, MooTools, and Everything Else",
				}
			},
		},
		{
			POPULARITY: {
				"@attributes": {
					TEXT: 7131,
					URL: "davidwalsh.name/"
				}
			},
			RANK: {
				"@attributes": {
					DELTA: "-1648"
				}
			},
			REACH: {
				"@attributes": {
					RANK = 5952
				}
			}
		}
	]
}

From here you can use the JavaScript object however you see fit. If you'd like the JavaScript in string JSON format, you can code:

// Assuming xmlDoc is the XML DOM Document
var jsonText = JSON.stringify(xmlToJson(xmlDoc));

This function has been extremely useful in allowing me to quickly disregard XML and use JSON instead.  The function works well when structuring attributes and arrays of nested child nodes.  Keep this handy;  at some point you may need to convert XML to JSON!

ydkjs-6.png

Recent Features

Incredible Demos

  • Facebook-Style Modal Box Using&nbsp;MooTools

    In my oh-so-humble opinion, Facebook's Modal box is the best modal box around. It's lightweight, subtle, and very stylish. I've taken Facebook's imagery and CSS and combined it with MooTools' awesome functionality to duplicate the effect. The Imagery Facebook uses a funky sprite for their modal...

  • HTML5&#8217;s window.postMessage&nbsp;API

    One of the little known HTML5 APIs is the window.postMessage API.  window.postMessage allows for sending data messages between two windows/frames across domains.  Essentially window.postMessage acts as cross-domain AJAX without the server shims. Let's take a look at how window.postMessage works and how you...

Discussion

  1. Nicely put. Good work!

  2. Pretty good topic, i am working in a ios project that needed localization and all kinda of stuffs and coredata was a pain in the ass to make it work, so i have made a xml file for each language and for my surprise, nsxmlparser is a sax parser and it really sucks, so i converted my xml file in a json with this site: http://shlang.com/xml2json/

    it worked and the json validated in the jsonlint.com

  3. Your code example has several incorrect references to $xmlToJson.

    I took a stab at cleaning up the xmlToJson function here.

  4. Rob james

    Is there any reason you’re not using the YQL function in titanium to do this? I’ve found it worked a treat, only I’m not sure how efficient it is.

    • My understanding is that I would need to then connect to Yahoo!’s servers. I’d prefer not to do that. They could change their service API, ban me, etc. Cutting YQL out cuts out a possible problem.

    • Rob James

      Yeah, probably the right decision based on those criteria. Though I had a tiny inkling that the YQL library was built in, it’s probably not, but is sure is fast!

      Cool, keep up the good work!

  5. Yes, JSON format need the quotes. Only keys of Objects in JavaScript can leave the quotating. It looks similar but dont mix it.

  6. Manually replacement? C’mon, regex replacement, live in the now! ;)

  7. You’re a rock star!

  8. Does item.nodeName include namespaces? I’m not sure what you would do in the case of namespace conflicts when converting to JSON, short of naming conventions.

  9. You may want to change the line that checks if the JS object is already an array from:

    if (typeof(obj[nodeName].length) == "undefined") {

    to:

    if (typeof(obj[nodeName].push) == "undefined") {

    As it currently is, the code will fail (on Chrome 10 at least) on XML that has whitespace nodes between the elements. The check for length will result in a false positive “yes, this #text item is an array”.

    With my modification the code will be able to handle XML document with whitespace nodes. It’ll still output lots of #text items in the arrays though and you’ll lose the order of the text nodes vs. sub-elements. YMMV.

    • Brilliant! Thank you so much for this fix.

    • You made this work for me – thanks!

    • I couldn’t figure out why David’s function was taking so long to parse my XML. I tried Frank van Puffelen’s fix and it is blazing fast now. It would take up to 20 seconds before and now it is in the milliseconds range. It was apparently failing silently in Titanium and every time it would fail, it would cause a costly operation to occur. Due to the number of iterations, it would cause the overall parsing be extremely slow.

      David– Thank you for providing this function. Would you please update your function to include this fix so additional visitors get the best version of this code?

    • Fixed! Thank you!

  10. I have perfected your work… :-)

    // a normal XMLHttpRequest function: it retrieves a file via XMLHTTPRequest, then calls fncCallback when done.
    
    function XHR(sURL, fncCallback /*, argumentToPass1, argumentToPass2, etc. */) {
    
    	var oResp, aArgs = Array.prototype.slice.call(arguments, 2);
    
    	if (window.XMLHttpRequest) { oResp = new XMLHttpRequest(); }
    
    	else if (window.ActiveXObject) { oResp = new ActiveXObject("Microsoft.XMLHTTP"); }
    
    	if (oResp) {
    
    		if (fncCallback) {
    
    			if (typeof oResp.onload !== "undefined")
    
    				oResp.onload = function() {
    
    					fncCallback.apply(oResp, aArgs);
    
    					oResp = null;
    
    				};
    
    			else {
    
    				oResp.onreadystatechange = function() {
    
    					if (oResp.readyState === 4) {
    
    						fncCallback.apply(oResp, aArgs);
    
    						oResp = null;
    
    					}
    
    				};
    
    			}
    
    		}
    
    		oResp.open("GET", sURL, true);
    
      		oResp.setRequestHeader("Content-Type", "text/plain");
    
    		oResp.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
    
    		oResp.send(null);
    
    	}
    
    }
    
    // recursive function which converts an XML DOM to a JavaScript Object
    function xml2Obj (oXMLDom) {
    	var oRObj = true;
    	if (oXMLDom.nodeType === 3) { // text
    		oRObj = oXMLDom.nodeValue.replace(/^\s+|\s+$/g, "");
    	} else {
    		if (oXMLDom.nodeType === 1) { // element
    			// do attributes
    			if (oXMLDom.attributes.length > 0) {
    				var iAttrib;
    				oRObj = {};
    				oRObj["@attributes"] = {};
    				for (var iAttrId = 0; iAttrId < oXMLDom.attributes.length; iAttrId++) {
    					iAttrib = oXMLDom.attributes.item(iAttrId);
    					oRObj["@attributes"][iAttrib.nodeName] = iAttrib.nodeValue;
    				}
    			}
    		}
    		// do children
    		if (oXMLDom.hasChildNodes()) {
    			var iKey, iValue, iXMLNode;
    			if (oRObj === true) { oRObj = {}; }
    			for (var iChildId = 0; iChildId < oXMLDom.childNodes.length; iChildId++) {
    				iXMLNode = oXMLDom.childNodes.item(iChildId);
    				iKey = iXMLNode.nodeType === 3 ? "@content" : iXMLNode.nodeName;
    				iValue = xml2Obj(iXMLNode);
    				if (oRObj.hasOwnProperty(iKey)) {
    					if (iXMLNode.nodeType === 3) { oRObj[iKey] += iValue; }
    					else {
    						if (oRObj[iKey].constructor !== Array) { oRObj[iKey] = [oRObj[iKey]]; }
    						oRObj[iKey].push(iValue);
    					}
    				} else if (iXMLNode.nodeType !== 3 || iValue !== "") { oRObj[iKey] = iValue; }
    			}
    	 	}
    	}
    	return(oRObj);
    };
    
    // function called via ajax callback
    function myFunction() {
    	// gets the object
    	var oMyObject = xml2Obj(this.responseXML);
    
    	// converts the object to a string and display it in an alert message
    	alert(JSON.stringify(oMyObject));
    }
    
  11. sorry…

    <!doctype html>
    <html>
    <head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    <title>XML to JavaScript Object conversion example</title>
    <script type="text/javascript">
    /**
    * a normal XMLHttpRequest function: it retrieves a file via XMLHTTPRequest, then calls the "callbackFnc" function when done.
    **/
    function XHR(sURL, callbackFnc /*, argumentToPass1, argumentToPass2, etc. */) {
        var oResp, aArgs = Array.prototype.slice.call(arguments, 2);
        if (window.XMLHttpRequest) { oResp = new XMLHttpRequest(); }
        else if (window.ActiveXObject) { oResp = new ActiveXObject("Microsoft.XMLHTTP"); }
        if (oResp) {
            if (callbackFnc) {
                if (typeof oResp.onload !== "undefined")
                    oResp.onload = function() {
                        callbackFnc.apply(oResp, aArgs);
                        oResp = null;
                    };
                else {
                    oResp.onreadystatechange = function() {
                        if (oResp.readyState === 4) {
                            callbackFnc.apply(oResp, aArgs);
                            oResp = null;
                        }
                    };
                }
            }
            oResp.open("GET", sURL, true);
              oResp.setRequestHeader("Content-Type", "text/plain");
            oResp.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
            oResp.send(null);
        }
    }
    
    /**
    * the recursive function which converts an XML Document to a JavaScript Object;
    * it will consider only the following node types and their attributes:
    * - Document,
    * - Element,
    * - Text,
    * - CDATASection;
    * all other informations will be lost!
    * it is a conscious choice.
    * please, see http://www.w3schools.com/dom/dom_nodetype.asp
    **/
    function xml2Obj (oXMLNode) {
        // default value for empty elements; it could be replaced with "null" instead of "true"... but i prefer so, because the truth is what appears :-)
        var vResult = true;
        // node attributes
        if (oXMLNode.attributes && oXMLNode.attributes.length > 0) {
            var iAttrib;
            vResult = {};
            vResult["@attributes"] = {};
            for (var iAttrId = 0; iAttrId < oXMLNode.attributes.length; iAttrId++) {
                iAttrib = oXMLNode.attributes.item(iAttrId);
                vResult["@attributes"][iAttrib.nodeName] = iAttrib.nodeValue;
            }
        }
        // children
        if (oXMLNode.hasChildNodes()) {
            var iKey, iValue, iXMLChild;
            if (vResult === true) { vResult = {}; } // if above you have changed the default value, then it must be also replaced within this "if statement" in the same way...
            for (var iChild = 0; iChild < oXMLNode.childNodes.length; iChild++) {
                iXMLChild = oXMLNode.childNodes.item(iChild);
                if ((iXMLChild.nodeType & 7) === 1) { // nodeType is "Document" (9) or "Element" (1)
                    iKey = iXMLChild.nodeName;
                    iValue = xml2Obj(iXMLChild);
                    if (vResult.hasOwnProperty(iKey)) {
                        if (vResult[iKey].constructor !== Array) { vResult[iKey] = [vResult[iKey]]; }
                        vResult[iKey].push(iValue);
                    } else { vResult[iKey] = iValue; }
                } else if ((iXMLChild.nodeType - 1 | 1) === 3) { // nodeType is "Text" (3) or "CDATASection" (4)
                    iKey = "@content";
                    iValue = iXMLChild.nodeType === 3 ? iXMLChild.nodeValue.replace(/^\s+|\s+$/g, "") : iXMLChild.nodeValue;
                    if (vResult.hasOwnProperty(iKey)) { vResult[iKey] += iValue; }
                    else if (iXMLChild.nodeType === 4 || iValue !== "") { vResult[iKey] = iValue; }
                }
            }
        }
        return(vResult);
    }
    
    // function called via ajax callback
    function myFunction() {
        // converts the XML document got via XMLHttpRequest
        var oMyObject = xml2Obj(this.responseXML);
    
        // converts the resultant object to a string and displays it in a textarea
        document.outputForm.outputBox.value = JSON.stringify(oMyObject);
    }
    </script>
    </head>
    
    <body>
    <h1>&ldquo;XML Document&rdquo; to &ldquo;JavaScript Object&rdquo; conversion example</h1>
    <form name="outputForm">
    <p><textarea name="outputBox" style="width: 100%; height: 300px;"></textarea></p>
    <p style="text-align: center"><input type="button" name="convertBtn" onclick="XHR('example.xml', myFunction);" value="Click me!" style="font-size: 24px;" /></p>
    <p>&hellip;I'll try to load the &ldquo;<a href="example.xml" title="Open the example XML file in a new tab." target="_blank">example.xml</a>&rdquo; file.</p>
    </form>
    </body>
    </html>
    
    • Lakshmi

      This is really awesome! Great Work David.

  12. spock

    Cool…I’m looking to go the other way with a twist.

    I need a simple way to take JSON output & convert it to CSV,
    but haven’t been able to locate any business user friendly utils for
    that.

    Thoughts?

  13. Is there anyway to grab CDATA values in your script?

  14. I have put together a little JSON sample that iterates over a JavaScript object and posts the property values to a cross domain server that is hosts by a DotNet.aspx page that then converts a C# object to a JSON string that is then posted back to the browser and converted back to a JavaScript object without having to use Window.Eval()

    The resultant JavaScript object is then finally past back to a call-back function that is ready to uses and the code does not need 3rd party libraries, works in net framework 2.0 and upwards and has been tested with IE6-IE9, Firefox plus it’s lightweight.

    Click my name for full details

  15. Thanks! Just started a titanium where a service only returns xml. Just the thing im looking for.

  16. John

    Hi!

    I’m trying to test your function in a webservice response but I can’t execute it. Always that I’ll try to compile and execute with Titanium SDK 1.7.5 it said me:

    [ERROR] Script Error = Result of expression ‘xml.hasChildNodes’ [undefined] is not a function. at XMLTools.js (line 22).

    I’m introducing your code in a file called XMLTools.js.

    Thanks so much!

    • Satish

      I’m getting the same error. Any idea on how to solve this? How do I pass an XML file to this function?

  17. Awesome script! however, I’m getting the following Runtime Error:

    TypeError: Cannot find function hasChildNodes in object [Ti.NodeList]...

    Please advise.

    Thanks!

    • You’re not passing in a DOM element. If you’re using JQuery, the easiest thing is to call $(your_xml_string)[0] to convert it.

  18. great post David,
    I’m not sure if our tool could be of any help for people reading this post, but it converts any RSS (which is written in XML) or html to JSON on the fly, you might want to take a look at it , it’s http://www.feedsapi.com , so if you are looking for a quick utility to help you, check it out.

  19. Satish

    Hi,
    How do I pass an XML file to this function? I’m new to JavScript, and I keep getting ‘xml.hasChildNodes’ [undefined] is not a function.

  20. Don’t know if anyone has mentioned it yet, but the test for array should be updated.

    if( Object.prototype.toString.call( obj[nodeName] ) !== '[object Array]' ) {
    //if (typeof(obj[nodeName].length) == "undefined") {
    

    If obj[nodeName] is a string it will have a length property.
    I think the prototype toString is pretty resilient.

  21. Rajesh

    This code is working fine on 1.8 SDK. but breaking on 2.1 SDK.

    Thans to FRANK VAN PUFFELEN and CLAUDE for providing fix.

  22. Rajesh

    One more fix for 2.1 sdk

    wrap xml.attributes.length if statement in another if

    if (xml.attributes) {
        if (xml.attributes.length > 0) {
            obj["@attributes"] = {};
            for (var j = 0; j < xml.attributes.length; j++) {
                var attribute = xml.attributes.item(j);
                obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
            }
        }
    }
    
  23. This worked a bit better for me:
    https://gist.github.com/3861616

  24. This is a version that provides a JSON object without the attributes and places textNodes as values rather than an object with the textNode in it.

    https://gist.github.com/4153569

  25. https://gist.github.com/4153569

    This is a version that provides a JSON object without the attributes and places textNodes as values rather than an object with the textNode in it.

    • Leon

      Hi Ben!

      I’m looking for a version that converts the textNode to a value rather than an object as well, did you post this somewhere? Thanks!

  26. Mohan

    Could any one help me to get the reverse of this post. i had seen somewhere on this site to convert JSON to XML .unfortunately i could not find it now.

  27. Hi everyone. Really nice script. I have a question though. I need to print on the screen the values of the xml. I see that some of the json objects come in the following format when I look at it in firebug:
    link Object { #text=”Homes”} or
    header Object {#cdata-section=”My data is here”‘}

    How do I print the contents of both this object on the page? I’ve tried things like myObj.data, myObj.textValue but nothing seems to work. Any help would be appreciate it.
    Thanks
    TJ

  28. H

    Sample json: {“response”:{“cd”:{“#text”:”1234″},”name”:{“#text”:”Adam”}} ….etc…

    Get value: var errorCode = response.cd['#text']; // string “1234”

  29. Hi, I’m very exited to see this function, good work!
    But in my application, I find too many whitespace text nodes under the “#text” property in my json object, they are useless and annoying, so I just want to remove them.
    Besides, I want my json object to be as simple as possible so as to make the code pretty, so I just extract all the attributes into the current node, e.g “wnd.attributes.size” => “wnd.size”, although it may destroy the original structure but seems simpler and make no mistake. I have verified the new json at JSONLint, it looks good.

    And here is my version, any ideas? :)

    // Changes XML to JSON
    function xmlToJson(xml) {
    	
    	// Create the return object
    	var obj = {};
    
    	if (xml.nodeType == 1) { // element
    		// do attributes
    		if (xml.attributes.length > 0) {
    		//obj["attributes"] = {};
    			for (var j = 0; j < xml.attributes.length; j++) {
    				var attribute = xml.attributes.item(j);
    				//obj["attributes"][attribute.nodeName] = attribute.nodeValue;
    				obj[attribute.nodeName] = attribute.nodeValue;
    			}
    		}
    	} else if (xml.nodeType == 3) { // text
    		obj = xml.nodeValue.trim(); // add trim here
    	}
    
    	// do children
    	if (xml.hasChildNodes()) {
    		for(var i = 0; i < xml.childNodes.length; i++) {
    			var item = xml.childNodes.item(i);
    			var nodeName = item.nodeName;
    			if (typeof(obj[nodeName]) == "undefined") {
    				var tmp = xmlToJson(item);
    				if(tmp != "") // if not empty string
    					obj[nodeName] = tmp;
    			} else {
    				if (typeof(obj[nodeName].push) == "undefined") {
    					var old = obj[nodeName];
    					obj[nodeName] = [];
    					obj[nodeName].push(old);
    				}
    				var tmp = xmlToJson(item);
    				if(tmp != "") // if not empty string
    					obj[nodeName].push(tmp);
    			}
    		}
    	}
    	return obj;
    };
    
    • @tjumyk
      Thanks for sharing your work.
      I only had to make some very small additions to get what I wanted.
      http://plnkr.co/edit/YLJSNv
      Make attributes property names start with an ‘@’ to avoid collisions.
      Makes a properties value equal null if its an empty object….checking if an object is empty is a pain ;).
      If the only property is a text node then dont return an object but a string…just like you wanted (and me) its really clean now.

  30. Very nice, I am researching the xml in javascript, but I am not sure that function you coded can be worked out in the IE6/ IE7… Thanks!

  31. i love to see this post, ^_^
    many thanks for your great function, (y)

  32. Hi
    I also thank you for this article Using your function presented in this page I created and used the javascript object posted on this page:
    http://coursesweb.net/javascript/convert-xml-json-javascript_s2
    It returns json object or string directly from file or string with xml.

  33. Trishul

    Awesome job, saved me a fortune.

  34. Isuru Ranawaka

    Great solution. Thanks Mr. Walsh!

  35. AnaC

    Hi!

    I’m having trouble converting XML to JSON, specfically RSS2.0 and ATOM with Javascript.

    I am actually looking for someone who can give me advice on specific questions. Can anyone help me?

    Thanks!!!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!