JXON (lossless JavaScript XML Object Notation) is a generic name by which is defined the representation of JavaScript Objects using XML. There are no real standards for this conversion, but some conventions begin to appear on the web. There are some cases in which the whole content of an XML document must be read from the JavaScript interpreter (like for web-apps languages or settings XML documents, for example). In these cases JXON could represent the most practical way.
In this article we will show how to convert a parsed XML {{ domxref("document") }} (i.e. an instance of Document) to a JavaScript Object tree (i.e. a tree of nested instances of Object) and viceversa, with some different algorithms. It could be useful to read the XML introduction article first.
If you want a complete bidirectional JXON library (modelled on the JSON global object), skip to the dedicated paragraph (but please read the note about the const statement compatibility).
Conversion snippets
Now imagine to have this sample XML document:
example.xml
<?xml version="1.0"?>
<!DOCTYPE catalog SYSTEM "catalog.dtd">
<catalog>
<product description="Cardigan Sweater">
<catalog_item gender="Men's">
<item_number>QWZ5671</item_number>
<price>39.95</price>
<size description="Medium">
<color_swatch image="red_cardigan.jpg">Red</color_swatch>
<color_swatch image="burgundy_cardigan.jpg">Burgundy</color_swatch>
</size>
<size description="Large">
<color_swatch image="red_cardigan.jpg">Red</color_swatch>
<color_swatch image="burgundy_cardigan.jpg">Burgundy</color_swatch>
</size>
</catalog_item>
<catalog_item gender="Women's">
<item_number>RRX9856</item_number>
<discount_until>Dec 25, 1995</discount_until>
<price>42.50</price>
<size description="Medium">
<color_swatch image="black_cardigan.jpg">Black</color_swatch>
</size>
</catalog_item>
</product>
<script type="text/javascript"><![CDATA[function matchwo(a,b) {
if (a < b && a < 0) { return 1; }
else { return 0; }
}]]></script>
</catalog>
First, create a DOM tree like the previous example as described in the How to Create a DOM tree article. If you have already have a DOM tree from using {{ domxref("XMLHttpRequest") }}, skip to the next paragraph.
XMLHttpRequest in order to retrieve your XML file, please use the yourRequest.responseXML property to get a parsed XML document. Don't use yourRequest.responseText!The algorithms proposed here (see: #1, #2, #3, #4) will consider only the following types of nodes and their attributes:
- {{ domxref("Document") }} (only as function argument),
- {{ domxref("DocumentFragment") }} (only as function argument),
- {{ domxref("Element") }},
- {{ domxref("Text") }} (never as function argument),
- {{ domxref("CDATASection") }} (never as function argument),
- {{ domxref("Attr") }} (never as function argument).
This is a good and standardized compromise for a JavaScript usage, since all of the information of an XML Document is contained in this types of nodes. All other information (like processing instructions, schemas, comments, etc.) will be lost (but due to the nature of the information which is lost, this type of algorithms is considered however lossless, since what is lost is meta-information and not information).
In order to avoid conflicts, the representation of nodes and attributes names is case insensitive (always rendered in lower case), so objects' local property names setted using JavaScript must always have some kind of capitalization (that is, at least one capital letter somewhere in their names), as you can see below.
The following algorithms are somewhat based on the Parker convention, version 0.4, which prescribes the transformation of tags names into object properties names and the recognition of the typeof of all the collected text content of each tag (plain text parsing); but with some differences (so, one can say that we follow a our convention). Moreover, all algorithms are equally lossless for the contemplated nodes.
We consider the third algorithm as the most representative and practical JXON parsing algorithm.
Now let's serialize doc — the DOM tree — to a JavaScript Object Tree (you can read more about working with Objects and how Javascript is Object-Oriented). We can use several algorithms to convert its content to a Javascript Object Tree.
Algorithm #1: a verbose way
This simple recursive constructor will convert an XML DOM tree to a JavaScript Object tree. The text content of each element is stored into the keyValue property, while nodeAttributes, if exist, are listed under the child object keyAttributes. The constructor's argument can be the entire XML Document, a DocumentFragment or simply an Element node of it.
/*\
|*|
|*| JXON Snippet #1 - Mozilla Developer Network
|*|
|*| https://developer.mozilla.org/en-US/docs/JXON
|*|
\*/
function parseText (sValue) {
if (/^\s*$/.test(sValue)) { return null; }
if (/^(?:true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; }
if (isFinite(sValue)) { return parseFloat(sValue); }
if (isFinite(Date.parse(sValue))) { return new Date(sValue); }
return sValue;
}
function JXONTree (oXMLParent) {
var nAttrLen = 0, nLength = 0, sCollectedTxt = "";
if (oXMLParent.hasChildNodes()) {
for (var oNode, sProp, vContent, nItem = 0; nItem < oXMLParent.childNodes.length; nItem++) {
oNode = oXMLParent.childNodes.item(nItem);
if ((oNode.nodeType - 1 | 1) === 3) { sCollectedTxt += oNode.nodeType === 3 ? oNode.nodeValue.trim() : oNode.nodeValue; } // nodeType is "Text" (3) or "CDATASection" (4)
else if (oNode.nodeType === 1 && !oNode.prefix) { // nodeType is "Element" (1)
sProp = oNode.nodeName.toLowerCase();
vContent = new JXONTree(oNode);
if (this.hasOwnProperty(sProp)) {
if (this[sProp].constructor !== Array) { this[sProp] = [this[sProp]]; }
this[sProp].push(vContent);
} else { this[sProp] = vContent; nLength++; }
}
}
this.keyValue = parseText(sCollectedTxt);
} else { this.keyValue = null; }
if (oXMLParent.hasAttributes()) {
var oAttrib;
this.keyAttributes = {};
for (nAttrLen; nAttrLen < oXMLParent.attributes.length; nAttrLen++) {
oAttrib = oXMLParent.attributes.item(nAttrLen);
this.keyAttributes[oAttrib.name.toLowerCase()] = parseText(oAttrib.value.trim());
}
}
/*
* Optional properties...
this.keyLength = nLength;
this.attributesLength = nAttrLen;
// this.DOMNode = oXMLParent;
*/
/* Object.freeze(this); */
}
/*
* Optional methods... Uncomment the optional properties first!
JXONTree.prototype.valueOf = function () { return this.keyValue; };
JXONTree.prototype.toString = function () { return String(this.keyValue); };
JXONTree.prototype.getItem = function (nItem) {
if (nLength === 0) { return null; }
var nCount = 0;
for (var sKey in this) { if (nCount === nItem) { return this[sKey]; } nCount++; }
return null;
};
JXONTree.prototype.getAttribute = function (nAttrId) {
if (nAttrLen === 0 || nAttrId + 1 > nAttrLen) { return null; }
var nAttr = 0;
for (var sAttrName in this.keyAttributes) { if (nAttr === nAttrId) { return this.keyAttributes[sAttrName]; } nAttr++; }
return null;
};
JXONTree.prototype.hasChildren = function () { return this.keyLength > 0; };
*/
var myObject = new JXONTree(doc);
// we got our javascript object! try: alert(JSON.stringify(myObject));
/* Object.freeze(this); */. The Object.freeze() method prevents new properties from being added to it, prevents existing properties from being removed and prevents existing properties, or their enumerability, configurability, or writability, from being changed. In essence the object tree is made effectively immutable.With this algorithm our example becomes:
{
"catalog": {
"product": {
"catalog_item": [{
"item_number": {
"keyValue": "QWZ5671"
},
"price": {
"keyValue": 39.95
},
"size": [{
"color_swatch": [{
"keyValue": "Red",
"keyAttributes": {
"image": "red_cardigan.jpg"
}
}, {
"keyValue": "Burgundy",
"keyAttributes": {
"image": "burgundy_cardigan.jpg"
}
}],
"keyValue": null,
"keyAttributes": {
"description": "Medium"
}
}, {
"color_swatch": [{
"keyValue": "Red",
"keyAttributes": {
"image": "red_cardigan.jpg"
}
}, {
"keyValue": "Burgundy",
"keyAttributes": {
"image": "burgundy_cardigan.jpg"
}
}],
"purchased": {
"keyValue": null
},
"keyValue": null,
"keyAttributes": {
"description": "Large"
}
}],
"keyValue": null,
"keyAttributes": {
"gender": "Men's"
}
}, {
"item_number": {
"keyValue": "RRX9856"
},
"discount_until": {
"keyValue": new Date(1995, 11, 25)
},
"price": {
"keyValue": 42.5
},
"size": {
"color_swatch": {
"keyValue": "Black",
"keyAttributes": {
"image": "black_cardigan.jpg"
}
},
"keyValue": null,
"keyAttributes": {
"description": "Medium"
}
},
"keyValue": null,
"keyAttributes": {
"gender": "Women's"
}
}],
"keyValue": null,
"keyAttributes": {
"description": "Cardigan Sweater"
}
},
"script": {
"keyValue": "function matchwo(a,b) {\n if (a < b && a < 0) { return 1; }\n else { return 0; }\n}",
"keyAttributes": {
"type": "text/javascript"
}
},
"keyValue": null
},
"keyValue": null
}
This is a recommanded technique if you don't know the structure of the XML document.
Algorithm #2: a less verbose way
Here is another, simpler, conversion method, in which nodeAttributes are listed under the same object of child nodes but have the “@” prefix (as suggested by the BadgerFish Convention). As above, the text content is stored into the keyValue property. The constructor's argument can be the entire XML Document, a DocumentFragment or simply an Element node of it.
/*\
|*|
|*| JXON Snippet #2 - Mozilla Developer Network
|*|
|*| https://developer.mozilla.org/en-US/docs/JXON
|*|
\*/
function parseText (sValue) {
if (/^\s*$/.test(sValue)) { return null; }
if (/^(?:true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; }
if (isFinite(sValue)) { return parseFloat(sValue); }
if (isFinite(Date.parse(sValue))) { return new Date(sValue); }
return sValue;
}
function JXONTree (oXMLParent) {
if (oXMLParent.hasChildNodes()) {
var sCollectedTxt = "";
for (var oNode, sProp, vContent, nItem = 0; nItem < oXMLParent.childNodes.length; nItem++) {
oNode = oXMLParent.childNodes.item(nItem);
if ((oNode.nodeType - 1 | 1) === 3) { sCollectedTxt += oNode.nodeType === 3 ? oNode.nodeValue.trim() : oNode.nodeValue; }
else if (oNode.nodeType === 1 && !oNode.prefix) {
sProp = oNode.nodeName.toLowerCase();
vContent = new JXONTree(oNode);
if (this.hasOwnProperty(sProp)) {
if (this[sProp].constructor !== Array) { this[sProp] = [this[sProp]]; }
this[sProp].push(vContent);
} else { this[sProp] = vContent; }
}
}
if (sCollectedTxt) { this.keyValue = parseText(sCollectedTxt); }
}
if (oXMLParent.hasAttributes()) {
var oAttrib;
for (var nAttrib = 0; nAttrib < oXMLParent.attributes.length; nAttrib++) {
oAttrib = oXMLParent.attributes.item(nAttrib);
this["@" + oAttrib.name.toLowerCase()] = parseText(oAttrib.value.trim());
}
}
/* Object.freeze(this); */
}
var myObject = new JXONTree(doc);
// we got our javascript object! try: alert(JSON.stringify(myObject));
/* Object.freeze(this); */. The Object.freeze() method prevents new properties from being added to it, prevents existing properties from being removed and prevents existing properties, or their enumerability, configurability, or writability, from being changed. In essence the object tree is made effectively immutable.With this algorithm our example becomes:
{
"catalog": {
"product": {
"catalog_item": [{
"item_number": {
"keyValue": "QWZ5671"
},
"price": {
"keyValue": 39.95
},
"size": [{
"color_swatch": [{
"keyValue": "Red",
"@image": "red_cardigan.jpg"
}, {
"keyValue": "Burgundy",
"@image": "burgundy_cardigan.jpg"
}],
"@description": "Medium"
}, {
"color_swatch": [{
"keyValue": "Red",
"@image": "red_cardigan.jpg"
}, {
"keyValue": "Burgundy",
"@image": "burgundy_cardigan.jpg"
}],
"@description": "Large"
}],
"@gender": "Men's"
}, {
"item_number": {
"keyValue": "RRX9856"
},
"discount_until": {
"keyValue": new Date(1995, 11, 25)
},
"price": {
"keyValue": 42.5
},
"size": {
"color_swatch": {
"keyValue": "Black",
"@image": "black_cardigan.jpg"
},
"@description": "Medium"
},
"@gender": "Women's"
}],
"@description": "Cardigan Sweater"
},
"script": {
"keyValue": "function matchwo(a,b) {\n if (a < b && a < 0) { return 1; }\n else { return 0; }\n}",
"@type": "text/javascript"
}
}
}
This is a possible technique to use if you partially know the structure of the XML document.
Algorithm #3: a synthetic technique
Here is another method of conversion. This algorithm is the closest to the Parker convention. It is very similar to the previous one, except that nodes which do not contain other recognizable nodes than Text or CDATASection are not treated as objects, but directly as booleans, strings, numbers or Date objects (see the Parker convention). Empty nodes (i.e. which do not contain other Element nodes, Text nodes, CDATASection nodes or Attr nodes) have the default value true (see the Code considerations). Also, this time it is not used a constructor, but a function. The function's argument can be the entire XML {{ domxref("Document") }}, a {{ domxref("DocumentFragment") }}, or simply an {{ domxref("Element") }} node within it. nodeAttributes have the “@” prefix, as suggested by the BadgerFish Convention. In many cases, this is the most practical conversion method.
/*\
|*|
|*| JXON Snippet #3 - Mozilla Developer Network
|*|
|*| https://developer.mozilla.org/en-US/docs/JXON
|*|
\*/
function parseText (sValue) {
if (/^\s*$/.test(sValue)) { return null; }
if (/^(?:true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; }
if (isFinite(sValue)) { return parseFloat(sValue); }
if (isFinite(Date.parse(sValue))) { return new Date(sValue); }
return sValue;
}
function getJXONTree (oXMLParent) {
var vResult = /* put here the default value for empty nodes! */ true, nLength = 0, sCollectedTxt = "";
if (oXMLParent.hasAttributes()) {
vResult = {};
for (nLength; nLength < oXMLParent.attributes.length; nLength++) {
oAttrib = oXMLParent.attributes.item(nLength);
vResult["@" + oAttrib.name.toLowerCase()] = parseText(oAttrib.value.trim());
}
}
if (oXMLParent.hasChildNodes()) {
for (var oNode, sProp, vContent, nItem = 0; nItem < oXMLParent.childNodes.length; nItem++) {
oNode = oXMLParent.childNodes.item(nItem);
if (oNode.nodeType === 4) { sCollectedTxt += oNode.nodeValue; } /* nodeType is "CDATASection" (4) */
else if (oNode.nodeType === 3) { sCollectedTxt += oNode.nodeValue.trim(); } /* nodeType is "Text" (3) */
else if (oNode.nodeType === 1 && !oNode.prefix) { /* nodeType is "Element" (1) */
if (nLength === 0) { vResult = {}; }
sProp = oNode.nodeName.toLowerCase();
vContent = getJXONTree(oNode);
if (vResult.hasOwnProperty(sProp)) {
if (vResult[sProp].constructor !== Array) { vResult[sProp] = [vResult[sProp]]; }
vResult[sProp].push(vContent);
} else { vResult[sProp] = vContent; nLength++; }
}
}
}
if (sCollectedTxt) { nLength > 0 ? vResult.keyValue = parseText(sCollectedTxt) : vResult = parseText(sCollectedTxt); }
/* if (nLength > 0) { Object.freeze(vResult); } */
return vResult;
}
var myObject = getJXONTree(doc);
// we got our javascript object! try: alert(JSON.stringify(myObject));
/* if (nLength > 0) { Object.freeze(vResult); } */. The Object.freeze() method prevents new properties from being added to it, prevents existing properties from being removed and prevents existing properties, or their enumerability, configurability, or writability, from being changed. In essence the object tree is made effectively immutable.With this algorithm, our example becomes:
{
"catalog": {
"product": {
"@description": "Cardigan Sweater",
"catalog_item": [{
"@gender": "Men's",
"item_number": "QWZ5671",
"price": 39.95,
"size": [{
"@description": "Medium",
"color_swatch": [{
"@image": "red_cardigan.jpg",
"keyValue": "Red"
}, {
"@image": "burgundy_cardigan.jpg",
"keyValue": "Burgundy"
}]
}, {
"@description": "Large",
"color_swatch": [{
"@image": "red_cardigan.jpg",
"keyValue": "Red"
}, {
"@image": "burgundy_cardigan.jpg",
"keyValue": "Burgundy"
}]
}]
}, {
"@gender": "Women's",
"item_number": "RRX9856",
"discount_until": new Date(1995, 11, 25),
"price": 42.5,
"size": {
"@description": "Medium",
"color_swatch": {
"@image": "black_cardigan.jpg",
"keyValue": "Black"
}
}
}]
},
"script": {
"@type": "text/javascript",
"keyValue": "function matchwo(a,b) {\n if (a < b && a < 0) { return 1; }\n else { return 0; }\n}"
}
}
}
This is a recommended technique if you know the structure of the XML document.
Algorithm #4: a very minimalist way
The following is another possible way to do the conversion. It is very close to the Parker convention, too. With this algorithm, all {{ domxref("Element") }} nodes that contain other child {{ domxref("Element") }}, {{ domxref("Text") }}, or {{ domxref("CDATASection") }} nodes in the same level are treated as instances of Boolean, Number, String, or Date Constructors. So any child Element node, if exists, will be nested in these types of objects.
For example:
<employee type="usher">John Smith</employee> <manager>Lisa Carlucci</manager>
becomes
var myObject = {
"employee": new String("John Smith"),
"manager": "Lisa Carlucci"
};
myObject.employee["@type"] = "usher";
// test
alert(myObject.manager); // "Lisa Carlucci"
alert(myObject.employee["@type"]); // "usher"
alert(myObject.employee); // "John Smith"
As for the third algorithm, nodes which do not contain other recognizable nodes than Text or CDATASection are not treated as objects, but directly as booleans, strings, numbers (primitive values) or Date objects; and empty nodes (i.e. which do not contain other Element nodes, Text nodes, CDATASection nodes or Attr nodes) have the default value true. As for the third algorithm it is not used a constructor, but a function. The function's argument can be the entire XML Document, a DocumentFragment or simply an Element node of it. nodeAttributes have the “@” prefix, as suggested by the BadgerFish Convention.
/*\
|*|
|*| JXON Snippet #4 - Mozilla Developer Network
|*|
|*| https://developer.mozilla.org/en-US/docs/JXON
|*|
\*/
function parseText (sValue) {
if (/^\s*$/.test(sValue)) { return null; }
if (/^(?:true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; }
if (isFinite(sValue)) { return parseFloat(sValue); }
if (isFinite(Date.parse(sValue))) { return new Date(sValue); }
return sValue;
}
function objectify (vValue) {
if (vValue === null) {
return new (function() {
this.toString = function() { return "null"; }
this.valueOf = function() { return null; }
})();
}
return vValue instanceof Object ? vValue : new vValue.constructor(vValue);
}
var aTmpEls = []; // loaded element nodes cache
function getJXONTree (oXMLParent) {
var sProp, vContent, vResult, nLength = 0, nLevelStart = aTmpEls.length,
nChildren = oXMLParent.hasChildNodes() ? oXMLParent.childNodes.length : 0, sCollectedTxt = "";
for (var oNode, nItem = 0; nItem < nChildren; nItem++) {
oNode = oXMLParent.childNodes.item(nItem);
if (oNode.nodeType === 4) { sCollectedTxt += oNode.nodeValue; } /* nodeType is "CDATASection" (4) */
else if (oNode.nodeType === 3) { sCollectedTxt += oNode.nodeValue.trim(); } /* nodeType is "Text" (3) */
else if (oNode.nodeType === 1 && !oNode.prefix) { aTmpEls.push(oNode); } /* nodeType is "Element" (1) */
}
var nLevelEnd = aTmpEls.length, vBuiltVal = parseText(sCollectedTxt);
if (oXMLParent.hasAttributes()) {
vResult = objectify(vBuiltVal);
for (nLength; nLength < oXMLParent.attributes.length; nLength++) {
oAttrib = oXMLParent.attributes.item(nLength);
vResult["@" + oAttrib.name.toLowerCase()] = parseText(oAttrib.value.trim());
}
} else if (nLevelEnd > nLevelStart) { vResult = objectify(vBuiltVal); }
for (var nElId = nLevelStart; nElId < nLevelEnd; nElId++) {
sProp = aTmpEls[nElId].nodeName.toLowerCase();
vContent = getJXONTree(aTmpEls[nElId]);
if (vResult.hasOwnProperty(sProp)) {
if (vResult[sProp].constructor !== Array) { vResult[sProp] = [vResult[sProp]]; }
vResult[sProp].push(vContent);
} else { vResult[sProp] = vContent; nLength++; }
}
aTmpEls.length = nLevelStart;
if (nLength === 0) { vResult = sCollectedTxt ? vBuiltVal : /* put here the default value for empty nodes: */ true; }
/* else { Object.freeze(vResult); } */
return vResult;
}
var myObject = getJXONTree(doc);
alert(myObject.catalog.product.catalog_item[1].size.color_swatch["@image"]); // "black_cardigan.jpg"
alert(myObject.catalog.product.catalog_item[1].size.color_swatch); // "Black" !
/* else { Object.freeze(vResult); } */. The Object.freeze() method prevents new properties from being added to it, prevents existing properties from being removed and prevents existing properties, or their enumerability, configurability, or writability, from being changed. In essence the object tree is made effectively immutable.This is a possible technique if you know the structure of the XML document.
Reverse algorithms
It is possible to reverse the algorithms proposed here in order to build a new XML document starting from a JavaScript Objects Tree. For simplicity, we will propose here a single example, which in a single method represents the inversion of all our algorithms.
/*\
|*|
|*| JXON Snippet #5 - Mozilla Developer Network
|*|
|*| https://developer.mozilla.org/en-US/docs/JXON
|*|
\*/
function createXML (oObjTree) {
function loadObjTree (oParentEl, oParentObj) {
var vValue, oChild;
if (oParentObj.constructor === String || oParentObj.constructor === Number || oParentObj.constructor === Boolean) {
oParentEl.appendChild(oNewDoc.createTextNode(oParentObj.toString())); /* verbosity level is 0 or 1 */
if (oParentObj === oParentObj.valueOf()) { return; }
} else if (oParentObj.constructor === Date) {
oParentEl.appendChild(oNewDoc.createTextNode(oParentObj.toGMTString()));
}
for (var sName in oParentObj) {
if (isFinite(sName)) { continue; } /* verbosity level is 0 */
vValue = oParentObj[sName];
if (sName === "keyValue") {
if (vValue !== null && vValue !== true) { oParentEl.appendChild(oNewDoc.createTextNode(vValue.constructor === Date ? vValue.toGMTString() : String(vValue))); }
} else if (sName === "keyAttributes") { /* verbosity level is 3 */
for (var sAttrib in vValue) { oParentEl.setAttribute(sAttrib, vValue[sAttrib]); }
} else if (sName.charAt(0) === "@") {
oParentEl.setAttribute(sName.slice(1), vValue);
} else if (vValue.constructor === Array) {
for (var nItem = 0; nItem < vValue.length; nItem++) {
oChild = oNewDoc.createElement(sName);
loadObjTree(oChild, vValue[nItem]);
oParentEl.appendChild(oChild);
}
} else {
oChild = oNewDoc.createElement(sName);
if (vValue instanceof Object) {
loadObjTree(oChild, vValue);
} else if (vValue !== null && vValue !== true) {
oChild.appendChild(oNewDoc.createTextNode(vValue.toString()));
}
oParentEl.appendChild(oChild);
}
}
}
const oNewDoc = document.implementation.createDocument("", "", null);
loadObjTree(oNewDoc, oObjTree);
return oNewDoc;
}
var newDoc = createXML(myObject);
// we got our Document instance! try: alert((new XMLSerializer()).serializeToString(newDoc));
Date instances, if they exist, are converted into Strings through the toGMTString() method. Nothing prohibits the use of any other conversion method. In addition, all properties of the tree with a true value will be converted into empty elements with no text nodes (see the Code considerations).This is a good solution if you want to automate the creation of an XML document. It is a bad choice, however, if you want to re-build an XML document previously converted into JSON. Although the bidirectional conversion is very faithful (except for {{ domxref("CDATASection") }} nodes, which will be converted into {{ domxref("Text") }} nodes), the process is unnecessarily costly. In fact, if your goal is to edit an XML document, it is strongly recommended to work on it rather than create new ones.
The Parker Convention
The functions listed above for the conversion of an XML document to JSON (often called "JXON algorithms") are more or less freely based on the Parker Convention (especially regarding the transformation of tags names into object properties names, the recognition of the typeof of all the collected text content of each tag and the absorption of solitary Text and/or CDATASection nodes into primitive values). It is called “Parker Convention” in opposition to “BadgerFish Convention”, after the comic Parker & Badger by Cuadrado. See also: BadgerFish Convention.
The following is a transcription of the Parker Convention paper (version 0.4), from the page “TransformingRules” of the xml2json-xslt project site.
This Convention was written in order to regulate the conversion to JSON from XSLT, so parts of it are futile for JavaScript.
Translation JSON
-
The root element will be absorbed, for there is only one:
<root>test</root>
becomes
"test"
-
Element names become object properties:
<root><name>Xml</name><encoding>ASCII</encoding></root>
becomes
{ "name": "Xml", "encoding": "ASCII" } -
Numbers are recognized (integers and decimals):
<root><age>12</age><height>1.73</height></root>
becomes
{ "age": 12, "height": 1.73 } -
Booleans are recognized case insensitive:
<root><checked>True</checked><answer>FALSE</answer></root>
becomes
{ "checked": true, "answer": false } -
Strings are escaped:
<root>Quote: " New-line: </root>
becomes
"Quote: \" New-line:\n"
-
Empty elements will become null:
<root><nil/><empty></empty></root>
becomes
{ "nil": null, "empty": null } -
If all sibling elements have the same name, they become an array
<root><item>1</item><item>2</item><item>three</item></root>
becomes
[1, 2, "three"]
-
Mixed mode text-nodes, comments and attributes get absorbed:
<root version="1.0">testing<!--comment--><element test="true">1</element></root>
becomes
{ "element": true } -
Namespaces get absorbed, and prefixes will just be part of the property name:
<root xmlns:ding="https://zanstra.com/ding"><ding:dong>binnen</ding:dong></root>
becomes
{ "ding:dong" : "binnen" }
true instead of null – see the Code considerations). Point 5 is automatically managed by the JavaScript method JSON.stringify(). Regarding point 9, we chose to ignore all nodes which have a prefix; you can include them by removing the string && !oNode.prefix from our algorithms (see the Code considerations).Extra JavaScript translations
This is the same as the JSON translation, but with these extras:
-
Property names are only escaped when necessary
<root><while>true</while><wend>false</wend><only-if/></root>
becomes
{ "while": true, wend: false, "only-if": null } -
Within a string, closing elements "</" are escaped as "<\/"
<root><![CDATA[<script>alert("YES");</script>]]></root>becomes
{ script: "<script>alert(\"YES\")<\/script>" } -
Dates are created as new
Dateobjects<root>2006-12-25</root>
becomes
new Date(2006, 12 - 1, 25)
-
Attributes and comments are shown as comments (for testing purposes):
<!--testing--><root><test version="1.0">123</test></root>
becomes
/* testing */ { test /* @version = "1.0" */ : 123} -
A bit of indentation is done, to keep things legible
JSON.stringify().In summary
Let's take the third algorithm as the most representative JXON parsing algorithm. A single structured XML Element might have eight different configurations:
- an empty element,
- an element with pure text content,
- an empty element with attributes,
- an element with text content and attributes,
- an element containing elements with different names,
- an element containing elements with identical names,
- an element containing elements and contiguous text,
- an element containing elements and non contiguous text.
The following table shows the corresponding conversion patterns between XML and JSON according to the third algorithm.
| Case | XML | JSON | Javascript access |
|---|---|---|---|
| 1 | <animal /> |
"animal": true |
myObject.animal |
| 2 | <animal>Deka</animal> |
"animal": "Deka" |
myObject.animal |
| 3 | <animal name="Deka" /> |
"animal": {"@name": "Deka"} |
myObject.animal["@name"] |
| 4 | <animal name="Deka">is my cat</animal> |
"animal": { "@name": "Deka", "keyValue": "is my cat" } |
myObject.animal["@name"], myObject.animal.keyValue |
| 5 | <animal> <dog>Charlie</dog> <cat>Deka</cat> </animal> |
"animal": { "dog": "Charlie", "cat": "Deka" } |
myObject.animal.dog, myObject.animal.cat |
| 6 | <animal> <dog>Charlie</dog> <dog>Mad Max</dog> </animal> |
"animal": { "dog": ["Charlie", "Mad Max"] } |
myObject.animal.dog[0], myObject.animal.dog[1] |
| 7 | <animal> in my house <dog>Charlie</dog> </animal> |
"animal": { "keyValue": "in my house", "dog": "Charlie" } |
myObject.animal.keyValue, myObject.animal.dog |
| 8 | <animal> in my ho <dog>Charlie</dog> use </animal> |
"animal": { "keyValue": "in my house", "dog": "Charlie" } |
myObject.animal.keyValue, myObject.animal.dog |
Code considerations
In these examples we chose to use a property named keyValue for the text content. The lack of standards for XML to JSON conversion leads developers to choose a variety of property names for the text content of XML {{ domxref("Element") }} nodes that also contain other child nodes. Sometimes a property called $ is used. Other times a property called #text is used (however, a name like this isn't a good choice, since the text content of a node can be parsed into a non-string value by our algorithms during the conversion). In the algorithms proposed here, you can easily change this name, depending on your needs.
The choice of using a true value instead of a null value to represent empty nodes is due to the fact that when in an XML document there is an empty node the reason is often to express a Boolean, as in this case:
<car> <type>Ferrari</type> <bought /> </car>
If the value were null it would be more cumbersome to launch a code like this:
if (myObject.car.bought) {
// do something
}
CDATASection nodes which contain nothing but white spaces (precisely: /^\s+$/) will be parsed as null.The fourth algorithm represents a special case of conversion. As you can see, the generated JavaScript Object tree is not stringifyable. It is very practical for internal JavaScript access, but don't use it if you want to transfer the tree via JSON string (as for Worker messages, for example).
We chose to ignore nodes which have a prefix (for example: <ding:dong>binnen</ding:dong>), due to their special case (they are often used in order to represents an XML Schema, which is meta-information concerning how to organize the information of the document, reserved for the XML parser). You can include them removing the string && !oNode.prefix from our algorithms (by doing so the whole tag will become the property name: { "ding:dong": "binnen" }).
An important consideration is that, when using the third or the fourth algorithm, an XML {{ domxref("Document") }} can be used to create any type of JavaScript object. For example, If you want to create an object like the following:
{
"myboolean": true,
"myarray": ["Cinema", "Hot dogs", false],
"myobject": {
"nickname": "Jack",
"registration_date": new Date(1995, 11, 25),
"privileged_user": true
},
"mynumber": 99,
"mytext": "Hello World!"
}
you must just create an XML document with the following structure:
<myboolean>true</myboolean> <myarray>Cinema</myarray> <myarray>Hot dogs</myarray> <myarray>false</myarray> <myobject> <nickname>Jack</nickname> <registration_date>Dec 25, 1995</registration_date> <privileged_user /> </myobject> <mynumber>99</mynumber> <mytext>Hello World!</mytext>
This example also shows how the ideal JXON document is an XML document designed specifically to be converted in JSON format, though our algorithms work fine with any kind of XML document.
Appendix: a complete, bidirectional, JXON library
Now we can create a more complete, bidirectional, JXON library based on all our algorithms (see: #1, #2, #3, #4, reverse). Its usage is modeled on the JSON native object. Before implementing it in a working environment, please read the note about the const statement compatibility.
/*\
|*|
|*| JXON framework - Copyleft 2011 by Mozilla Developer Network
|*|
|*| Revision #1 - September 5, 2014
|*|
|*| https://developer.mozilla.org/en-US/docs/JXON
|*|
|*| This framework is released under the GNU Public License, version 3 or later.
|*| https://www.gnu.org/licenses/gpl-3.0-standalone.html
|*|
\*/
const JXON = new (function () {
const
sValProp = "keyValue", sAttrProp = "keyAttributes", sAttrsPref = "@", /* you can customize these values */
aCache = [], rIsNull = /^\s*$/, rIsBool = /^(?:true|false)$/i;
function parseText (sValue) {
if (rIsNull.test(sValue)) { return null; }
if (rIsBool.test(sValue)) { return sValue.toLowerCase() === "true"; }
if (isFinite(sValue)) { return parseFloat(sValue); }
if (isFinite(Date.parse(sValue))) { return new Date(sValue); }
return sValue;
}
function EmptyTree () {}
EmptyTree.prototype.toString = function () { return "null"; };
EmptyTree.prototype.valueOf = function () { return null; };
function objectify (vVal) {
return vVal === null ? new EmptyTree() : vVal instanceof Object ? vVal : new vVal.constructor(vVal);
}
function createObjTree (oParentNode, nVerb, bFreeze, bNesteAttr) {
const
nLevelStart = aCache.length, bChildren = oParentNode.hasChildNodes(),
bAttributes = oParentNode.hasAttributes(), bHighVerb = Boolean(nVerb & 2);
var
sProp, vContent, nLength = 0, sCollectedTxt = "",
vResult = bHighVerb ? {} : /* put here the default value for empty nodes: */ true;
if (bChildren) {
for (var oNode, nItem = 0; nItem < oParentNode.childNodes.length; nItem++) {
oNode = oParentNode.childNodes.item(nItem);
if (oNode.nodeType === 4) { sCollectedTxt += oNode.nodeValue; } /* nodeType is "CDATASection" (4) */
else if (oNode.nodeType === 3) { sCollectedTxt += oNode.nodeValue.trim(); } /* nodeType is "Text" (3) */
else if (oNode.nodeType === 1 && !oNode.prefix) { aCache.push(oNode); } /* nodeType is "Element" (1) */
}
}
const nLevelEnd = aCache.length, vBuiltVal = parseText(sCollectedTxt);
if (!bHighVerb && (bChildren || bAttributes)) { vResult = nVerb === 0 ? objectify(vBuiltVal) : {}; }
for (var nElId = nLevelStart; nElId < nLevelEnd; nElId++) {
sProp = aCache[nElId].nodeName.toLowerCase();
vContent = createObjTree(aCache[nElId], nVerb, bFreeze, bNesteAttr);
if (vResult.hasOwnProperty(sProp)) {
if (vResult[sProp].constructor !== Array) { vResult[sProp] = [vResult[sProp]]; }
vResult[sProp].push(vContent);
} else {
vResult[sProp] = vContent;
nLength++;
}
}
if (bAttributes) {
const
nAttrLen = oParentNode.attributes.length,
sAPrefix = bNesteAttr ? "" : sAttrsPref, oAttrParent = bNesteAttr ? {} : vResult;
for (var oAttrib, nAttrib = 0; nAttrib < nAttrLen; nLength++, nAttrib++) {
oAttrib = oParentNode.attributes.item(nAttrib);
oAttrParent[sAPrefix + oAttrib.name.toLowerCase()] = parseText(oAttrib.value.trim());
}
if (bNesteAttr) {
if (bFreeze) { Object.freeze(oAttrParent); }
vResult[sAttrProp] = oAttrParent;
nLength -= nAttrLen - 1;
}
}
if (nVerb === 3 || (nVerb === 2 || nVerb === 1 && nLength > 0) && sCollectedTxt) {
vResult[sValProp] = vBuiltVal;
} else if (!bHighVerb && nLength === 0 && sCollectedTxt) {
vResult = vBuiltVal;
}
if (bFreeze && (bHighVerb || nLength > 0)) { Object.freeze(vResult); }
aCache.length = nLevelStart;
return vResult;
}
function loadObjTree (oXMLDoc, oParentEl, oParentObj) {
var vValue, oChild;
if (oParentObj.constructor === String || oParentObj.constructor === Number || oParentObj.constructor === Boolean) {
oParentEl.appendChild(oXMLDoc.createTextNode(oParentObj.toString())); /* verbosity level is 0 or 1 */
if (oParentObj === oParentObj.valueOf()) { return; }
} else if (oParentObj.constructor === Date) {
oParentEl.appendChild(oXMLDoc.createTextNode(oParentObj.toGMTString()));
}
for (var sName in oParentObj) {
vValue = oParentObj[sName];
if (isFinite(sName) || vValue instanceof Function) { continue; } /* verbosity level is 0 */
if (sName === sValProp) {
if (vValue !== null && vValue !== true) { oParentEl.appendChild(oXMLDoc.createTextNode(vValue.constructor === Date ? vValue.toGMTString() : String(vValue))); }
} else if (sName === sAttrProp) { /* verbosity level is 3 */
for (var sAttrib in vValue) { oParentEl.setAttribute(sAttrib, vValue[sAttrib]); }
} else if (sName.charAt(0) === sAttrsPref) {
oParentEl.setAttribute(sName.slice(1), vValue);
} else if (vValue.constructor === Array) {
for (var nItem = 0; nItem < vValue.length; nItem++) {
oChild = oXMLDoc.createElement(sName);
loadObjTree(oXMLDoc, oChild, vValue[nItem]);
oParentEl.appendChild(oChild);
}
} else {
oChild = oXMLDoc.createElement(sName);
if (vValue instanceof Object) {
loadObjTree(oXMLDoc, oChild, vValue);
} else if (vValue !== null && vValue !== true) {
oChild.appendChild(oXMLDoc.createTextNode(vValue.toString()));
}
oParentEl.appendChild(oChild);
}
}
}
/* Uncomment the following code if you want to enable the .appendJXON() method for *all* the "element" objects! */
/*
Element.prototype.appendJXON = function (oObjTree) {
loadObjTree(document, this, oObjTree);
return this;
};
*/
this.build = function (oXMLParent, nVerbosity /* optional */, bFreeze /* optional */, bNesteAttributes /* optional */) {
const nVerbMask = arguments.length > 1 && typeof nVerbosity === "number" ? nVerbosity & 3 : /* put here the default verbosity level: */ 1;
return createObjTree(oXMLParent, nVerbMask, bFreeze || false, arguments.length > 3 ? bNesteAttributes : nVerbMask === 3);
};
this.unbuild = function (oObjTree, sNamespaceURI /* optional */, sQualifiedName /* optional */, oDocumentType /* optional */) {
const oNewDoc = document.implementation.createDocument(sNamespaceURI || null, sQualifiedName || "", oDocumentType || null);
loadObjTree(oNewDoc, oNewDoc, oObjTree);
return oNewDoc;
};
})();
const (constant statement) is not part of ECMAScript 5. It is supported in Firefox & Chrome (V8) and partially supported in Opera 9+ and Safari. It is not supported in Internet Explorer 6-9, or in the preview of Internet Explorer 10. const is going to be defined by ECMAScript 6, but with different semantics. Similar to variables declared with the let statement, constants declared with const will be block-scoped. We used it only for didactic purpose. If you want a full browser compatibility of this library, please replace all the const statements with the var statements.Usage
The obtained non-native JXON global object will have two methods:
| Method | Description |
|---|---|
JXON.build(document[, verbosity[, freeze[, nesteAttributes]]]) |
Returns a JavaScript Object based on the given XML Document. |
JXON.unbuild(objTree[, namespaceURI[, qualifiedNameStr[, documentType]]]) |
Returns an XML {{ domxref("Document") }} based on the given JavaScript Object. |
These methods are inverses of each other. So, you can work with the JXON object by inserting the previous code at the beginning of your scripts. If you are not interested in a bidirectional conversion, don't use it, use only one of our algotithm instead.
Sample usage:
var myObject = JXON.build(doc); // we got our javascript object! try: alert(JSON.stringify(myObject)); var newDoc = JXON.unbuild(myObject); // we got our Document instance! try: alert((new XMLSerializer()).serializeToString(newDoc));
…the same thing using AJAX:
function reqListener () {
var myObject = JXON.build(this.responseXML);
// we got our javascript object!
alert(JSON.stringify(myObject));
var newDoc = JXON.unbuild(myObject);
// we got our Document instance!
alert((new XMLSerializer()).serializeToString(newDoc));
};
var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.open("get", "example.xml", true);
oReq.send();
JXON.build syntax
JXON.build(document[, verbosity[, freeze[, nesteAttributes]]])
JXON.build description
Returns a JavaScript Object based on the given XML Document.
JXON.build parameters
-
document - The XML document to be converted into JSON format.
-
verbosityOptional -
The verbosity level of conversion (optional), from
0to3. It is almost equivalent to our algorithms from #4 to #1 (default value is1, which is equivalent to the algorithm #3). -
freezeOptional -
A boolean (optional) expressing whether the created object must be freezed or not (default value is
false). -
nesteAttributesOptional -
A boolean (optional) expressing whether the the
nodeAttributesmust be nested into a child-object namedkeyAttributesor not (default value isfalsefor verbosity levels from0to2;truefor verbosity level3).
JXON.unbuild syntax
JXON.unbuild(objTree[, namespaceURI[, qualifiedNameStr[, documentType]]])
JXON.unbuild description
Returns an XML Document based on the given JavaScript Object.
JXON.unbuild parameters
-
objTree - The JavaScript Object from which you want to create your XML Document.
-
namespaceURIOptional -
Is a
DOMStringcontaining the namespace URI of the document to be created, ornullif the document doesn't belong to one. -
qualifiedNameStrOptional -
Is a
DOMStringcontaining the qualified name, that is an optional prefix and colon plus the local root element name, of the document to be created. -
documentTypeOptional -
Is the
DocumentTypeof the document to be created. It defaults tonull.
Extend the native Element.prototype object
If you want to enable the .appendJXON() method for all the native element objects, you can uncomment the following code from the JXON library:
/* Uncomment the following code if you want to enable the .appendJXON() method for *all* the "element" objects! */
/*
Element.prototype.appendJXON = function (oObjTree) {
loadObjTree(document, this, oObjTree);
return this;
};
*/
Example
Imagine you want to populate the following HTMLElement through JSON:
<div id="form_container"></div>
Then, the following code:
document.getElementById("form_container").appendJXON({
"form": {
"script": {
"@type": "text/javascript",
"keyValue": "\n function numbersOnly (oToCheckField, oKeyEvent) {\n return oKeyEvent.charCode === 0 || /\\d/.test(String.fromCharCode(oKeyEvent.charCode));\n }\n"
},
"input": [{
"@type": "hidden",
"@name": "instId",
"@value": 1234
}, {
"@type": "hidden",
"@name": "currency",
"@value": "GBP"
}, {
"@type": "hidden",
"@name": "amount",
"@value": 0
}, {
"@type": "hidden",
"@name": "name",
"@value": "CAPTURED"
}],
"table": {
"tr": [{
"th": {
"@style": "text-align: right;",
"keyValue": "Product:"
},
"td": {
"span": [{
"input": {
"@type": "radio",
"@name": "nome",
"@id": "rel_tshirt",
"@value": "tshirt"
},
"label": {
"@for": "rel_tshirt",
"keyValue": "T-Shirt"
},
"@class": "product"
}, {
"input": {
"@type": "radio",
"@name": "nome",
"@id": "rel_trousers",
"@value": "trousers"
},
"label": {
"@for": "rel_trousers",
"keyValue": "Trousers"
},
"@class": "product"
}, {
"input": {
"@type": "radio",
"@name": "nome",
"@id": "rel_pullover",
"@value": "pullover"
},
"label": {
"@for": "rel_pullover",
"keyValue": "Pullover"
},
"@class": "product"
}]
}
}, {
"th": {
"@style": "text-align: right;",
"keyValue": "Quantity:"
},
"td": {
"input": {
"@type": "text",
"@name": "myInput",
"@onkeypress": "return numbersOnly(this, event);",
"@onpaste": "return false;"
}
}
}]
},
"p": {
"input": {
"@type": "submit",
"@value": "Purchase!"
}
},
"@action": "https://secure-test.worldpay.com/wcc/purchase",
"@name": "BuyForm",
"@method": "POST"
}
});
will populate the previous element in the following way:
<div id="form_container">
<form action="https://secure-test.worldpay.com/wcc/purchase" name="BuyForm" method="POST">
<script type="text/javascript">
function numbersOnly(oToCheckField, oKeyEvent) {
return oKeyEvent.charCode === 0 || /\d/.test(String.fromCharCode(oKeyEvent.charCode));
}
</script>
<input type="hidden" name="instId" value="1234" />
<input type="hidden" name="currency" value="GBP" />
<input type="hidden" name="amount" value="0" />
<input type="hidden" name="name" value="CAPTURED" />
<table>
<tr>
<th style="text-align: right;">Product:</th>
<td><span class="product"><input type="radio" name="nome" id="rel_tshirt" value="tshirt"/><label for="rel_tshirt">T-Shirt</label></span><span class="product"><input type="radio" name="nome" id="rel_trousers" value="trousers"/><label for="rel_trousers">Trousers</label></span><span class="product"><input type="radio" name="nome" id="rel_pullover" value="pullover"/><label for="rel_pullover">Pullover</label></span>
</td>
</tr>
<tr>
<th style="text-align: right;">Quantity:</th>
<td>
<input type="text" name="myInput" onkeypress="return numbersOnly(this, event);" onpaste="return false;" />
</td>
</tr>
</table>
<p>
<input type="submit" value="Purchase!" />
</p>
</form>
</div>
Other examples
Example #1: How to use JXON to create an HTML document instead of an XML document:
/* The structure of my document */
var oMyHTMLStruct = {
"html": {
"head": {
"meta": {
"@http-equiv": "Content-Type",
"@content": "text/html; charset=UTF-8"
},
"title": "My HTML Document",
"script": {
"@type": "text/javascript",
"keyValue": "alert(\"Welcome!\");"
},
"style": "p:first-letter {\n font: italic bold 30px Georgia, serif;\n}"
},
"body": {
"h1": "My HTML Document",
"p": "Hello world!!"
}
}
};
/* Create the document */
var oMyHTMLDoc = JXON.unbuild(oMyHTMLStruct, "https://www.w3.org/1999/xhtml");
…And here is the output of alert((new XMLSerializer()).serializeToString(oMyHTMLDoc)):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My HTML Document</title>
<script type="text/javascript">
alert("Welcome!");
</script>
<style>
p:first-letter {
font: italic bold 30px Georgia, serif;
}
</style>
</head>
<body>
<h1>My HTML Document</h1>
<p>Hello world!!</p>
</body>
</html>
<p>She <strong>loves</strong> you. And definitely <strong>hates</strong> me.</p>would determine a result like the following:
<p><strong>loves</strong><strong>hates</strong>Sheyou. And definitelyme.</p>As you can see in this special case, the whole information is preserved, the ordering of the elements is not.
It turns out then that for some XML dialects JXON can be not the best choise, while it can be a really powerful tool in dealing with standard XML. One conversion method which is lossless for element order, as it relies on arrays, is JsonML. Our algorithms, instead, use arrays – so, are lossless regarding the element order – only for XML tags with the same name.
About this library
The JXON.build() method summarizes all our four ways of conversion (see: #1, #2, #3, #4). The result is therefore the same of our four algorithms, depending on the level of verbosity utilised. As above, optional properties and methods (commented in the example) of the first algorithm (verbosity level: 3) are not included.
The JXON.unbuild() method utilises our reverse algorithm.
Therefore, all code considerations remain the same.
Resources
- The Parker Convention
- The BadgerFish Convention
- JXON: an Architecture for Schema and Annotation Driven JSON/XML Bidirectional Transformations
- JXON – A simple way to keep XML out of your life – Dino Gambone's blog
- Web Reflection: JXON – Lossless JavaScript to XML Object Notation convertion
- Convert XML to JSON with JavaScript – David Walsh Blog
- https://goessner.net/download/prj/jsonxml/ – just another json2xml and xml2json conversion tool
- Serialize JavaScript objects to XML (for use with Ajax) – Tawani's Blog Rants
- XML.ObjTree – XML source code from/to JavaScript object like E4X – Kawa.net
- JsonML – a conversion method which is lossless for element order, as it relies on arrays.