XML parsing in Jquery

Here we will parse xml and store it in array. Later we will send this array to a new page and display its values in a table.

Desired Output

click the image to zoom













Download project from here or here


ParseInJquery.jsp

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>XML parse in Jquery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>

<script>
function parse(details){
    var items = jQuery(details).find('start');
   
    var key="";
    var values="";
   
    for (var i = 0; i < items.length; i++) {
        var ret = [];
        var tot=[];
        ret[0] = jQuery(items[i]).find('Table_No').text();
        console.log("parse " + ret[0]);
        key +=ret[0]+ " ";
      
        ret[1] = jQuery(items[i]).find('Line_No').text();
        ret[2] = jQuery(items[i]).find('Val_perc').text();
        ret[3] = jQuery(items[i]).find('Upper_lim').text();
        ret[4] = jQuery(items[i]).find('Day_puc').text();
       
        ret[5] = jQuery(items[i]).find('Day_Sales').text();
        ret[6] = jQuery(items[i]).find('Sett_Purch').text();
        ret[7] = jQuery(items[i]).find('round_to').text();
        ret[8] = jQuery(items[i]).find('Table_name').text();
       
        ret[9] = jQuery(items[i]).find('sett_sales').text();
        ret[10] = jQuery(items[i]).find('NORMAL').text();
        ret[11] = jQuery(items[i]).find('Trd_Del').text();
        ret[12] = jQuery(items[i]).find('Lower_lim').text();
       
        ret[13] = jQuery(items[i]).find('def_table').text();
        ret[14] = jQuery(items[i]).find('RoFig').text();
        ret[15] = jQuery(items[i]).find('ErrNum').text();
        ret[16] = jQuery(items[i]).find('NoZero').text();
      
        tot.push(ret);
        console.log("tot=" + tot);
        values +=tot+ "|";
    }
      return {key:key , values:values};
}

// We need to escape special characters like inverted comma(""). So put \ slash before inverted comma(") in xml if xml is hard coded (as shown below xml) . If the xml is dynamic then no need to escape characters

var data="<?xml version=\"1.0\" encoding=\"utf-8\"?> <soap:Envelope xmlns:soap=\"http://www.w3.org/2003/05/soap-envelope\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\"> <soap:Body> <GetBrokerageDetailsResponse xmlns=\"http://tempuri.org/\"> <GetBrokerageDetailsResult> <xs:schema id=\"NewDataSet\" xmlns=\"\" xmlns:xs=\"http://www.w3.org/2001/XMLSchema\" xmlns:msdata=\"urn:schemas-microsoft-com:xml-msdata\"> <xs:element name=\"NewDataSet\" msdata:IsDataSet=\"true\" msdata:UseCurrentLocale=\"true\"> <xs:complexType> <xs:choice minOccurs=\"0\" maxOccurs=\"unbounded\"> <xs:element name=\"Table\"> <xs:complexType> <xs:sequence> <xs:element name=\"Table_No\" type=\"xs:int\" minOccurs=\"0\" /> <xs:element name=\"Line_No\" type=\"xs:decimal\" minOccurs=\"0\" /> <xs:element name=\"Val_perc\" type=\"xs:string\" minOccurs=\"0\" /> <xs:element name=\"Upper_lim\" type=\"xs:decimal\" minOccurs=\"0\" /> <xs:element name=\"Day_puc\" type=\"xs:decimal\" minOccurs=\"0\" /> <xs:element name=\"Day_Sales\" type=\"xs:decimal\" minOccurs=\"0\" /> <xs:element name=\"Sett_Purch\" type=\"xs:decimal\" minOccurs=\"0\" /> <xs:element name=\"round_to\" type=\"xs:decimal\" minOccurs=\"0\" /> <xs:element name=\"Table_name\" type=\"xs:string\" minOccurs=\"0\" /> <xs:element name=\"sett_sales\" type=\"xs:decimal\" minOccurs=\"0\" /> <xs:element name=\"NORMAL\" type=\"xs:decimal\" minOccurs=\"0\" /> <xs:element name=\"Trd_Del\" type=\"xs:string\" minOccurs=\"0\" /> <xs:element name=\"Lower_lim\" type=\"xs:decimal\" minOccurs=\"0\" /> <xs:element name=\"def_table\" type=\"xs:unsignedByte\" minOccurs=\"0\" /> <xs:element name=\"RoFig\" type=\"xs:int\" minOccurs=\"0\" /> <xs:element name=\"ErrNum\" type=\"xs:decimal\" minOccurs=\"0\" /> <xs:element name=\"NoZero\" type=\"xs:int\" minOccurs=\"0\" /> </xs:sequence> </xs:complexType> </xs:element> </xs:choice> </xs:complexType> </xs:element> </xs:schema> <diffgr:diffgram xmlns:msdata=\"urn:schemas-microsoft-com:xml-msdata\" xmlns:diffgr=\"urn:schemas-microsoft-com:xml-diffgram-v1\"> <NewDataSet xmlns=\"\"> <Table diffgr:id=\"Table1\" msdata:rowOrder=\"0\"> <Table_No>12345</Table_No> <Line_No>1</Line_No> <Val_perc>V</Val_perc> <Upper_lim>100.00</Upper_lim> <Day_puc>1.000000</Day_puc> <Day_Sales>1.000000</Day_Sales> <Sett_Purch>1.000000</Sett_Purch> <round_to>4.00</round_to> <Table_name>T-1V 1P BOTH SODE             </Table_name> <sett_sales>1.000000</sett_sales> <NORMAL>0.000000</NORMAL> <Trd_Del>F</Trd_Del> <Lower_lim>0.00</Lower_lim> <def_table>0</def_table> <RoFig>0</RoFig> <ErrNum>50.0000</ErrNum> <NoZero>1</NoZero> </Table> <Table diffgr:id=\"Table2\" msdata:rowOrder=\"1\"> <Table_No>23456</Table_No> <Line_No>2</Line_No> <Val_perc>P</Val_perc> <Upper_lim>10000000.00</Upper_lim> <Day_puc>1.000000</Day_puc> <Day_Sales>1.000000</Day_Sales> <Sett_Purch>1.000000</Sett_Purch> <round_to>4.00</round_to> <Table_name>T-1V 1P BOTH SODE             </Table_name> <sett_sales>1.000000</sett_sales> <NORMAL>0.000000</NORMAL> <Trd_Del>F</Trd_Del> <Lower_lim>100.00</Lower_lim> <def_table>0</def_table> <RoFig>0</RoFig> <ErrNum>50.0000</ErrNum> <NoZero>1</NoZero> </Table> <Table diffgr:id=\"Table3\" msdata:rowOrder=\"2\"> <Table_No>34567</Table_No> <Line_No>3</Line_No> <Val_perc>V</Val_perc> <Upper_lim>100.00</Upper_lim> <Day_puc>1.000000</Day_puc> <Day_Sales>1.000000</Day_Sales> <Sett_Purch>1.000000</Sett_Purch> <round_to>4.00</round_to> <Table_name>T-1V 1P BOTH SODE             </Table_name> <sett_sales>1.000000</sett_sales> <NORMAL>0.000000</NORMAL> <Trd_Del>S</Trd_Del> <Lower_lim>0.00</Lower_lim> <def_table>0</def_table> <RoFig>0</RoFig> <ErrNum>50.0000</ErrNum> <NoZero>1</NoZero> </Table> <Table diffgr:id=\"Table4\" msdata:rowOrder=\"3\"> <Table_No>456789</Table_No> <Line_No>4</Line_No> <Val_perc>P</Val_perc> <Upper_lim>10000000.00</Upper_lim> <Day_puc>1.000000</Day_puc> <Day_Sales>1.000000</Day_Sales> <Sett_Purch>1.000000</Sett_Purch> <round_to>4.00</round_to> <Table_name>T-1V 1P BOTH SODE             </Table_name> <sett_sales>1.000000</sett_sales> <NORMAL>0.000000</NORMAL> <Trd_Del>S</Trd_Del> <Lower_lim>100.00</Lower_lim> <def_table>0</def_table> <RoFig>0</RoFig> <ErrNum>50.0000</ErrNum> <NoZero>1</NoZero> </Table> </NewDataSet> </diffgr:diffgram> </GetBrokerageDetailsResult> </GetBrokerageDetailsResponse> </soap:Body> </soap:Envelope> "; 

var input = data.match("<diffgr:diffgram xmlns:msdata=\"urn:schemas-microsoft-com:xml-msdata\" xmlns:diffgr=\"urn:schemas-microsoft-com:xml-diffgram-v1\">(.*)</diffgr:diffgram>");
var inputxml = input[1];  
alert("inputxml:   "+inputxml); 

// Replacing tags to meet our need using replace function in jquery
inputxml=inputxml.replace(/<Table_No>/g, '<start><Table_No>'); 
inputxml=inputxml.replace(/<\/NoZero>/g, '</NoZero></start>'); // escape special characters by using \ slash

prompt("inputxml",inputxml);
data=inputxml;

function parsedValues()
{
var x=parse(data);

 var key=x.key;
 alert("key: "+x.key);

 var values=x.values;
 var values_words=values.split("|");
 var values_length=values_words.length;
 alert("values: "+x.values+ "\n Total words: "+(values_length-1));

           alert("values_words [1] :   "+values_words[1]);
           return values;
  
}

var output=parsedValues();
alert ("output: "+output);
$.ajax({
    type: "POST",
    url: "DisplayInTable.jsp",
    data: "output=" +output+"&type=data_in_array",
     success: function(response){
       var win = window.open("","","width=800, height=400,resizable=yes");
       win.document.write(response);
     
    }
    });
</script>

<form name="dataform">
<input type="text" id="value">
</form>

</body>
</html>




DisplayInTable.jsp

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Display Array in Table</title>

 <script>
 function getTable_No(Table_No,type)
    {
     if (type=='data_in_array')
        {
  var Table_No_From_td_tag;
 Table_No_From_td_tag= document.getElementById(Table_No).innerHTML;
    opener.document.dataform.value.value =Table_No_From_td_tag;
    window.close();
        }
    }
  </script>
 
 
</head>
<body>

<%
String data1 = request.getParameter("output");
String data2 = request.getParameter("type");

System.out.println("data1: "+data1);
System.out.println("data2: "+data2);

String[] splited_to_row = data1.split("\\|");
int splited_to_row_Length=splited_to_row.length;
//System.out.println("splited_to_row 0:  "+splited_to_row[0]);
//System.out.println("splited_to_row_Length :  "+splited_to_row_Length);

String[] splited_to_column=splited_to_row[0].split(",");  // hardcodes 0 for getting length
int splited_to_column_Length=splited_to_column.length;
       
//System.out.println("splited_to_column_Length: "+splited_to_column_Length);
//System.out.println("splited_to_column 0: "+splited_to_column[0]);


// Note: To display array in proper table structure, first try without using <td> tag as below

//for(int i=0; i < splited_to_row_Length; i++)
//{
//    splited_to_column=splited_to_row[i].split(",");
//    for(int j=0; j < splited_to_column_Length; j++)
//    {
//    System.out.println("splited_to_column for loop ------: "+splited_to_column[j]);
//    }
//}
%>
<table border="1" style="background-color:#FFFFFF;border-collapse:collapse;border:1px solid #000000;color:#000000;width:100%" cellpadding="3" cellspacing="3">
<tr>
<th>Table_No</th>
<th>Line_No</th>
<th>Val_perc</th>
<th>Upper_lim</th>
<th>Day_puc</th>
<th>Day_Sales</th>
<th>Sett_Purch</th>
<th>round_to</th>
<th>Table_name</th>
<th>sett_sales</th>
<th>NORMAL</th>
<th>Trd_Del</th>
<th>Lower_lim</th>
<th>Def_table</th>
<th>RoFig</th>
<th>ErrNum</th>
<th>NoZero</th>
</tr>

 <%
 for(int i=0; i < splited_to_row_Length; i++)
{
     %>
     <tr>
     <%
    splited_to_column=splited_to_row[i].split(",");
     %>
     <%-- Since we need text of one full column in blue color we write seperate <td> --%>
     <td style="color: blue;" id='<%=splited_to_column[0]%>' onclick="getTable_No(this.id,'<%=data2 %>')">  <%-- passing this.id(current id) and data2(type) as parameter --%>
       <%=splited_to_column[0]%>
     </td>
     <%
   
    for(int j=0; j < splited_to_column_Length-1; j++)
    {
        %>
        <td>
        <%System.out.println("splited_to_column for loop ------: "+splited_to_column[j]);%>
        <%=splited_to_column[j+1]%>  <%-- j+1 for remaining <td> as 1st <td> is already written above. Also splited_to_column_Length-1 as we have to display one column less--%>
        </td>
       
     <%
     }

    %>
    </tr>
    <%
}
 %>
</table>

</body>
</html>

Desired Output


No comments:

Post a Comment

Subscribe to: Posts (Atom)