Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.
Archive of obsolete content

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 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).

Note: If you are interested to address only some parts of an XML document (and are not starting in JavaScript/JSON for templating purposes), use XPath instead of converting the whole document into JSON.

Conversion snippets

Now imagine you 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 XMLHttpRequest, skip to the next paragraph.

Note: If you are using an instance of 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:

  1. Document (only as function argument),
  2. DocumentFragment (only as function argument),
  3. Element,
  4. Text (never as function argument),
  5. CDATASection (never as function argument),
  6. 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 these node types. All other information (like processing instructions, schemas, comments, etc.) will be lost. This type of algorithm is still considered 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 set 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 they 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.

/*\
|*|
|*|  JXON Snippet #1 - Mozilla Developer Network
|*|
|*|  https://developer.mozilla.org/en-US/docs/JXON
|*|  https://developer.mozilla.org/User:fusionchess
|*|
|*|  This framework is released under the GNU Public License, version 3 or later.
|*|  https://www.gnu.org/licenses/gpl-3.0-standalone.html
|*|
\*/

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 (oParentNode.hasAttributes && 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));
Note: If you want to freeze the whole object tree (because of the "static" nature of an XML document), uncomment the string: /* 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
|*|  https://developer.mozilla.org/User:fusionchess
|*|
|*|  This framework is released under the GNU Public License, version 3 or later.
|*|  https://www.gnu.org/licenses/gpl-3.0-standalone.html
|*|
\*/

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 (oParentNode.hasAttributes && 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));
Note: If you want to freeze the whole object tree (because of the "static" nature of an XML document), uncomment the string: /* 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 we use a function instead of a constructor. The function's argument can be the entire XML Document, a DocumentFragment, or simply an 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
|*|  https://developer.mozilla.org/User:fusionchess
|*|
|*|  This framework is released under the GNU Public License, version 3 or later.
|*|  https://www.gnu.org/licenses/gpl-3.0-standalone.html
|*|
\*/

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 && 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));
Note: If you want to freeze the whole object tree (because of the "static" nature of an XML document), uncomment the string: /* 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 Element nodes that contain other child Element, Text, or 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"
Note: This algorithm represents a special case of conversion. The generated JavaScript Object tree is not stringifyable (see the Code considerations). 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 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
|*|  https://developer.mozilla.org/User:fusionchess
|*|
|*|  This framework is released under the GNU Public License, version 3 or later.
|*|  https://www.gnu.org/licenses/gpl-3.0-standalone.html
|*|
\*/

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 (oParentNode.hasAttributes && 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" !
Note: If you want to freeze the whole object tree (because of the "static" nature of an XML document), uncomment the string: /* 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
|*|  https://developer.mozilla.org/User:fusionchess
|*|
|*|  This framework is released under the GNU Public License, version 3 or later.
|*|  https://www.gnu.org/licenses/gpl-3.0-standalone.html
|*|
\*/

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));
Note: With this code the 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 CDATASection nodes, which will be converted into 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.

Note: On October 29th, 2013, the World Wide Web Consortium relased in a note on official algorithm for converting HTML5 microdata to JSON. However, HTML microdata is not HTML: microdata is a formatted subset of HTML.

Translation JSON

  1. The root element will be absorbed, for there is only one:

    <root>test</root>

    becomes

    "test"

  2. Element names become object properties:

    <root><name>Xml</name><encoding>ASCII</encoding></root>

    becomes

    {
  "name": "Xml",
  "encoding": "ASCII"
}

  3. Numbers are recognized (integers and decimals):

    <root><age>12</age><height>1.73</height></root>

    becomes

    {
  "age": 12,
  "height": 1.73
}

  4. Booleans are recognized case insensitive:

    <root><checked>True</checked><answer>FALSE</answer></root>

    becomes

    {
  "checked": true,
  "answer": false
}

  5. Strings are escaped:

    <root>Quote: &quot; New-line:
</root>

    becomes

    "Quote: \" New-line:\n"

  6. Empty elements will become null:

    <root><nil/><empty></empty></root>

    becomes

    {
  "nil": null,
  "empty": null
}

  7. 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"]

  8. Mixed mode text-nodes, comments and attributes get absorbed:

    <root version="1.0">testing<!--comment--><element test="true">1</element></root>

    becomes

    { "element": true }

  9. 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" }
Note: Our algorithms comply with points 2, 3, 4 and 7. The third and the fourth algorithm comply also with point 6 (but 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:

  1. 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
}

  2. Within a string, closing elements "</" are escaped as "<\/"

    <root><![CDATA[<script>alert("YES");</script>]]></root>

    becomes

    { script: "<script>alert(\"YES\")<\/script>" }

  3. Dates are created as new Date objects

    <root>2006-12-25</root>

    becomes

    new Date(2006, 12 - 1, 25)

  4. 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}

  5. A bit of indentation is done, to keep things legible

Note: Our algorithms comply with the point 3 (but without month decrease). The points 1 and 2 are automatically managed by the JavaScript method 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:

  1. an empty element,
  2. an element with pure text content,
  3. an empty element with attributes,
  4. an element with text content and attributes,
  5. an element containing elements with different names,
  6. an element containing elements with identical names,
  7. an element containing elements and contiguous text,
  8. 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 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
}
Note: According to our third algorithm and our fourth algorithm, just 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 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.

Note: Despite the term JXON suggesting "lossless" conversions, these techniques are not actually lossless if one needs to preserve ordering of elements, as is common with many XML dialects (including of course XHTML). The ECMAScript standard (JavaScript) indicates that object iteration order is implementation dependent.

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. The following code is also available on GitHub.

"use strict";

/*\
|*|
|*|  JXON framework - Copyleft 2011 by Mozilla Developer Network
|*|
|*|  Revision #3 - October 31th, 2016
|*|
|*|  https://developer.mozilla.org/en-US/docs/JXON
|*|  https://developer.mozilla.org/User:fusionchess
|*|  https://github.com/madmurphy/jxon.js
|*|
|*|  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 () {

  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 && 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
    sValProp = "keyValue", sAttrProp = "keyAttributes", sAttrsPref = "@", /* you can customize these values */
    aCache = [], rIsNull = /^\s*$/, rIsBool = /^(?:true|false)$/i;

})();
Note: The current implementation of 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 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.
verbosity Optional
The verbosity level of conversion (optional), from 0 to 3. It is almost equivalent to our algorithms from #4 to #1 (default value is 1, which is equivalent to the algorithm #3).
freeze Optional
A boolean (optional) expressing whether the created object must be freezed or not (default value is false).
nesteAttributes Optional
A boolean (optional) expressing whether the the nodeAttributes must be nested into a child-object named keyAttributes or not (default value is false for verbosity levels from 0 to 2; true for verbosity level 3).

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.
namespaceURI Optional
Is a DOMString containing the namespace URI of the document to be created, or null if the document doesn't belong to one.
qualifiedNameStr Optional
Is a DOMString containing the qualified name, that is an optional prefix and colon plus the local root element name, of the document to be created.
documentType Optional
Is the DocumentType of the document to be created. It defaults to null.

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>
Note: As we already said in the note within Code considerations, despite the bidirectional conversion between XML and JSON is lossless regarding the whole content and the structure of an XML document, it is not lossless regarding the ordering of elements, which for some XML dialects (like XHTML) is part of the information. For instance, a bidirectional conversion of the following HTML paragraph: 
<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 (but, with a less human-readable, JavaScript-friendly syntax), is JsonML.

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

See also

Document Tags and Contributors

Tags: 
 Contributors to this page: fusionchess, teoli, PaoloMarini, josf, PabloMayrgundter, mattbasta, Brettz9, Sheppy
 Last updated by: fusionchess,