Examples

List of examples

• Simple transformation
• Navigating through node structure
• Sorting by attribute
• Sorting by value
• Sorting by node
• Using indexOf method to find a node position

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

1. <root>
   1. <node name="test">Test Value</node>
   2. <node name="test2">
      1. <![CDATA[Test Value 2]]>
   3. </node>
   4. <group name="test3">
      1. <item name="Item 1" value="1"/>
      2. <item name="Item 2" value="2"/>
      3. <item name="Item 3" value="3"/>
   5. </group>
2. </root>

Structure of json object:

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

Note: All Array() type objects inside json variable are extended with these functions:
In our example it would be node, group and group.item

1. Array.prototype.getNodesByAttribute = function(attr, obj) {...}
2. Array.prototype.contains = function(attr, obj) {...}
3. Array.prototype.indexOf = function(attr, obj) {...}
4. Array.prototype.SortByAttribute = function(attr, dir) {...}
5. Array.prototype.SortByValue = function(dir) {...}
6. 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

1. <root>
   1. <node name="test">Test Value</node>
   2. <node name="test2">
      1. <![CDATA[Test Value 2]]>
   3. </node>
   4. <group name="test3">
      1. <item name="Item 1" value="1"/>
      2. <item name="Item 2" value="2"/>
      3. <item name="Item 3" value="3"/>
   5. </group>
2. </root>

JavaScript Code:

1. //Let's fetch simple.xml using jQuery ajax request
2. $.ajax({
   1. type: "GET",
   2. url: "/xml/simple.xml", //Requesting simple.xml
   3. dataType: "xml", //Make sure that you specify the type of file you expecting (XML)
   4. complete: function(data) {
      1. var json = $.xmlToJSON(data.responseXML); //Please notice that we use responseXML here which is DOMDocument object
      2. //Now I want to get a value of the second node
      3. alert(json.node[1].Text); //Result should be "Test Value 2"
   5. }
3. });

Navigating through node structure

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

XML File: simple.xml

1. <root>
   1. <node name="test">Test Value</node>
   2. <node name="test2">
      1. <![CDATA[Test Value 2]]>
   3. </node>
   4. <group name="test3">
      1. <item name="Item 1" value="1"/>
      2. <item name="Item 2" value="2"/>
      3. <item name="Item 3" value="3"/>
   5. </group>
2. </root>

JavaScript Code:

1. //Let's fetch simple.xml using jQuery ajax request
2. $.ajax({
   1. type: "GET",
   2. url: "/xml/simple.xml", //Requesting simple.xml
   3. dataType: "xml", //Make sure that you specify the type of file you expecting (XML)
   4. complete: function(data) {
      1. var json = $.xmlToJSON(data.responseXML); //Please notice that we use responseXML here which is DOMDocument object
      2. //Now I want to get a value of the second item node which is a child of the group node
      3. var secondItemNodeOfGroup = json.group[0].item[1];
      4. alert(secondItemNodeOfGroup.name); //Result should be "Item 2"
   5. }
3. });

Sorting by attribute

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

XML File: data.xml

1. <root>
   1. <group>
      1. <item name="test3" type="b" active="no">B</item>
      2. <item name="test4" type="b" active="no">DC</item>
      3. <item name="test5" type="c" active="yes">AC</item>
      4. <item name="test1" type="a" active="yes">A</item>
      5. <item name="test2" type="a" active="yes">ABC</item>
   2. </group>
2. </root>

JavaScript Code:

1. //Let's fetch data.xml using jQuery ajax request
2. $.ajax({
   1. type: "GET",
   2. url: "/xml/data.xml",
   3. dataType: "xml", //Make sure that you specify the type of file you expecting (XML)
   4. complete: function(data) {
      1. var json = $.xmlToJSON(data.responseXML); //Please notice that we use responseXML here which is DOMDocument object
      2. //Now I want to sort all item nodes by name
      3. json.group[0].item.SortByAttribute("name"); //Default order is ASC
      4. var out = "";
      5. for(var i = 0; i < json.group[0].item.length; i++) {
         1. out += json.group[0].item[i].name + "\n";
      6. }
      7. alert(out);
   5. }
3. });

Sorting by value

Now let's sort item nodes by their value

XML File: data.xml

1. <root>
   1. <group>
      1. <item name="test3" type="b" active="no">B</item>
      2. <item name="test4" type="b" active="no">DC</item>
      3. <item name="test5" type="c" active="yes">AC</item>
      4. <item name="test1" type="a" active="yes">A</item>
      5. <item name="test2" type="a" active="yes">ABC</item>
   2. </group>
2. </root>

JavaScript Code:

1. //Let's fetch data.xml using jQuery ajax request
2. $.ajax({
   1. type: "GET",
   2. url: "/xml/data.xml",
   3. dataType: "xml",
   4. //Make sure that you specify the type of file you expecting (XML)
   5. complete: function(data) {
      1. var json = $.xmlToJSON(data.responseXML); //Please notice that we use responseXML here which is DOMDocument object
      2. //Now I want to sort all item nodes by their value
      3. json.group[0].item.SortByValue(); //Default order is ASC
      4. var out = "";
      5. for(var i = 0; i < json.group[0].item.length; i++) {
      6. out += json.group[0].item[i].Text + "\n";
      7. }
      8. alert(out);
   6. }
3. });

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

1. <root>
   1. <rows>
      1. <row><col1>test3</col1><col2>b</col2><col3>no</col3></row>
      2. <row><col1>test4</col1><col2>b</col2><col3>no</col3></row>
      3. <row><col1>test5</col1><col2>c</col2><col3>yes</col3></row>
      4. <row><col1>test1</col1><col2>a</col2><col3>yes</col3></row>
      5. <row><col1>test2</col1><col2>a</col2><col3>yes</col3></row>
   2. </rows>
2. </root>

JavaScript Code:

1. //Let's fetch data.xml using jQuery ajax request
2. $.ajax({
   1. type: "GET",
   2. url: "/xml/data2.xml",
   3. dataType: "xml",
   4. //Make sure that you specify the type of file you expecting (XML)
   5. complete: function(data) {
      1. var json = $.xmlToJSON(data.responseXML); //Please notice that we use responseXML here which is DOMDocument object
      2. //Now I want to sort all rows by node col1
      3. json.rows[0].row.SortByNode("col1"); //Default order is ASC
      4. var out = "";
      5. for(var i = 0; i < json.rows[0].row.length; i++) {
         1. out += json.rows[0].row[i].col1[0].Text + "\n";
      6. }
      7. alert(out);
   6. }
3. });

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 contains 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

1. <!-- Here is our node-set (item) -->
2. <root>
   1. <group>
      1. <item name="test3" type="b" active="no">B</item>
      2. <item name="test4" type="b" active="no">DC</item>
      3. <item name="test5" type="c" active="yes">AC</item>
      4. <item name="test1" type="a" active="yes">A</item>
      5. <item name="test2" type="a" active="yes">ABC</item>
   2. </group>
3. </root>

JavaScript Code:

1. //Let's fetch data.xml using jQuery ajax request
2. $.ajax({
   1. type: "GET",
   2. url: "/xml/data.xml",
   3. dataType: "xml", //Make sure that you specify the type of file you expecting (XML)
   4. complete: function(data) {
      1. var json = $.xmlToJSON(data.responseXML); //Please notice that we use responseXML here which is DOMDocument object
      2. //Now I want to find a node where attribute name is equal to 'test1'
      3. var nodePos = json.group[0].item.indexOf("name", "test1"); //Just in case we want to get reference to that node
      4. var thatNode = (nodePos != -1)?json.group[0].item[nodePos]:null;
      5. alert(nodePos);
   5. }
3. });