Books related to this content

Examples

"Hello World" Example

As requested by some users here is the Hello World example. Run It | Source(txt)

What does the object look like?

Let's reveal the contents of the JSON object to further analyze it's internal structure

XML File: simple.xml
<root>
 <node name="test">Test Value</node>
 <node name="test2">
  <![CDATA[Test Value 2]]>
 </node>
 <group name="test3">
  <item name="Item 1" value="1"/>
  <item name="Item 2" value="2"/>
  <item name="Item 3" value="3"/>
 </group>
</root>

Structure of json object:
var json = {
  "typeOf":"JSXBObject",
  _children: ["node", "group"],
  node: [
   {name:"test", Text:"Test Value", _attributes:["name"]},
   {name:"test2", Text:"Test Value 2",_attributes:["name"]}
  ],
  group: [
   {name:"test3", _attributes:["name"],_children:["item"],
    item: [
     {name:"Item 1", value:"1",_attributes:["name","value"]},
     {name:"Item 2", value:"2",_attributes:["name","value"]},
     {name:"Item 3", value:"3",_attributes:["name","value"]}
    ]}
  ]
}

Note: All Array() type objects inside json variable are extended with these functions:
//In our example it would be node, group and group.item
Array.prototype.getNodeByAttribute = function(attr, obj) {...}
Array.prototype.contains = function(attr, obj) {...}
Array.prototype.indexOf = function(attr, obj) {...}
Array.prototype.SortByAttribute = function(attr, dir) {...}
Array.prototype.SortByValue = function(dir) {...}
Array.prototype.SortByNode = function(node, dir) {...}

Simple Transformation

In this example we will take a sample xml file simple.xml and will demonstrate how to transform it to JSON object

XML File: simple.xml
<root>
 <node name="test">Test Value</node>
 <node name="test2">
  <![CDATA[Test Value 2]]>
 </node>
 <group name="test3">
  <item name="Item 1" value="1"/>
  <item name="Item 2" value="2"/>
  <item name="Item 3" value="3"/>
 </group>
</root>

JavaScript Code:
//Let's fetch simple.xml using jQuery ajax request
$.ajax({
  type: "GET",
  url: "/xml/simple.xml", //Requesting simple.xml
  dataType: "xml", //Make sure that you specify the type of file you expecting (XML)
  complete: function(data) {

   var json = $.xmlToJSON(data.responseXML); //Please notice that we use responseXML here which is DOMDocument object
   //Now I want to get a value of the second node
   alert(json.node[1].Text); //Result should be "Test Value 2"
}
});

Let's try to get an attribute of the item node buried deeper inside a group node

XML File: simple.xml
<root>
 <node name="test">Test Value</node>
 <node name="test2">
  <![CDATA[Test Value 2]]>
 </node>
 <group name="test3">
  <item name="Item 1" value="1"/>
  <item name="Item 2" value="2"/>
  <item name="Item 3" value="3"/>
 </group>
</root>

JavaScript Code:
//Let's fetch simple.xml using jQuery ajax request
$.ajax({
  type: "GET",
  url: "/xml/simple.xml", //Requesting simple.xml
  dataType: "xml", //Make sure that you specify the type of file you expecting (XML)
  complete: function(data) {

   var json = $.xmlToJSON(data.responseXML); //Please notice that we use responseXML here which is DOMDocument object
   //Now I want to get a value of the second item node which is a child of the group node

   var secondItemNodeOfGroup = json.group[0].item[1];
   alert(secondItemNodeOfGroup.name); //Result should be "Item 2"
}
});

Sorting by attribute

This simple example demonstrates how to sort node collection (Array) by an attribute name

XML File: data.xml
<root>
  <group>
   <item name="test3" type="b" active="no">B</item>
   <item name="test4" type="b" active="no">DC</item>
   <item name="test5" type="c" active="yes">AC</item>
   <item name="test1" type="a" active="yes">A</item>
   <item name="test2" type="a" active="yes">ABC</item>
  </group>
</root>

JavaScript Code:
//Let's fetch data.xml using jQuery ajax request
$.ajax({
  type: "GET",
  url: "/xml/data.xml",
  dataType: "xml", //Make sure that you specify the type of file you expecting (XML)
  complete: function(data) {

   var json = $.xmlToJSON(data.responseXML); //Please notice that we use responseXML here which is DOMDocument object
  //Now I want to sort all item nodes by name
   json.group[0].item.SortByAttribute("name"); //Default order is ASC
   var out = "";
   for(var i = 0; i < json.group[0].item.length; i++) {
     out += json.group[0].item[i].name + "\n";
   }
   alert(out);
}
});

Sorting by value

Now let's sort item nodes by their value

XML File: data.xml
<root>
  <group>
   <item name="test3" type="b" active="no">B</item>
   <item name="test4" type="b" active="no">DC</item>
   <item name="test5" type="c" active="yes">AC</item>
   <item name="test1" type="a" active="yes">A</item>
   <item name="test2" type="a" active="yes">ABC</item>
  </group>
</root>

JavaScript Code:
//Let's fetch data.xml using jQuery ajax request
$.ajax({
  type: "GET",
  url: "/xml/data.xml",
  dataType: "xml", //Make sure that you specify the type of file you expecting (XML)
  complete: function(data) {

   var json = $.xmlToJSON(data.responseXML); //Please notice that we use responseXML here which is DOMDocument object
  //Now I want to sort all item nodes by their value
   json.group[0].item.SortByValue(); //Default order is ASC
   var out = "";
   for(var i = 0; i < json.group[0].item.length; i++) {
     out += json.group[0].item[i].Text + "\n";
   }
   alert(out);
}
});

Sorting by Node

This sorting example applies to the data format that encapsulates row data elements into sperate nodes instead of attributes

XML File: data2.xml
<root>
  <rows>
   <row>
    <col1>test3</col1>
    <col2>b</col2>
    <col3>no</col3>
   </row>
   <row>
    <col1>test4</col1>
    <col2>b</col2>
    <col3>no</col3>
   </row>
   <row>
    <col1>test5</col1>
    <col2>c</col2>
    <col3>yes</col3>
    </row>
   <row>
    <col1>test1</col1>
    <col2>a</col2>
    <col3>yes</col3>
   </row>
   <row>
    <col1>test2</col1>
    <col2>a</col2>
    <col3>yes</col3>
   </row>
  </rows>
</root>

JavaScript Code:
//Let's fetch data.xml using jQuery ajax request
$.ajax({
  type: "GET",
  url: "/xml/data2.xml",
  dataType: "xml", //Make sure that you specify the type of file you expecting (XML)
  complete: function(data) {

   var json = $.xmlToJSON(data.responseXML); //Please notice that we use responseXML here which is DOMDocument object
  //Now I want to sort all rows by node col1
   json.rows[0].row.SortByNode("col1"); //Default order is ASC
   var out = "";
   for(var i = 0; i < json.rows[0].row.length; i++) {
     out += json.rows[0].row[i].col1[0].Text + "\n";
   }
   alert(out);
}
});

Using indexOf method to find a node position

Let's assume you have a node-set where you have several nodes with the same name and common attributes, and you want to find a position of the node where one of the attributes contanis a speciffic value. By using indexOf method on the array of nodes, you can find position of one particular node where value of the attribute matches your arguments.

XML File: data.xml
<!-- Here is our node-set (item) -->
<root>
  <group>
   <item name="test3" type="b" active="no">B</item>
   <item name="test4" type="b" active="no">DC</item>
   <item name="test5" type="c" active="yes">AC</item>
   <item name="test1" type="a" active="yes">A</item>
   <item name="test2" type="a" active="yes">ABC</item>
  </group>
</root>

JavaScript Code:
//Let's fetch data.xml using jQuery ajax request
$.ajax({
  type: "GET",
  url: "/xml/data.xml",
  dataType: "xml", //Make sure that you specify the type of file you expecting (XML)
  complete: function(data) {

   var json = $.xmlToJSON(data.responseXML); //Please notice that we use responseXML here which is DOMDocument object
  //Now I want to find a node where attribute name is equal to 'test1'
   var nodePos = json.group[0].item.indexOf("name", "test1");
   //Just in case we want to get reference to that node
   var thatNode = (nodePos != -1)?json.group[0].item[nodePos]:null;
   alert(nodePos);
}
});