Thursday, 9 January 2014

Read xml file/string/data using jQuery/JavaScript

Hi,

Add latest version of jquery in your page first.

You can add following too.

<script src="jquery.js" type="text/javascript"></script>

Now put this code in your page if you want to catch xml data from other resource like webservice or webmethod.

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: 'yourURLHere',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            ProcessData: true,
            success: function (data) {
                if (data1 != null) {
data = $.parseXML(data);
$(data).find('Table').each(function () {
                        var Name = $(this).find('Name').text();
                       var Code = $(this).find('Code').text();
                        alert(Name);
                               alert(Code);
                   });

                }
            },
            error: function (response, textStatus, errorThrown) {
                alert('not OK ' + response.responseText);
                alert('not OK ' + textStatus.responseText);
                alert('not OK ' + errorThrown);
            }
        });
    });
</script>

In above javascript i am getting below data and i handled that in js

<ListCurrencyResponse xmlns="http://webservice.hotel.com.au/"><ListCurrencyResult><xs:schema id="NewDataSet" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns="" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata"><xs:element name="NewDataSet" msdata:IsDataSet="true" msdata:MainDataTable="Table" msdata:Locale=""><xs:complexType><xs:choice minOccurs="0" maxOccurs="unbounded"><xs:element name="Table"><xs:complexType><xs:sequence><xs:element name="Name" type="xs:string" minOccurs="0"/><xs:element name="Code" type="xs:string" minOccurs="0"/><xs:element name="IsHC" type="xs:boolean" minOccurs="0"/><xs:element name="IsEAN" type="xs:boolean" minOccurs="0"/><xs:element name="Symbol" type="xs:string" minOccurs="0"/></xs:sequence></xs:complexType></xs:element></xs:choice></xs:complexType></xs:element></xs:schema><diffgr:diffgram xmlns:diffgr="urn:schemas-microsoft-com:xml-diffgram-v1" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata"><NewDataSet xmlns=""><Table diffgr:id="Table1" msdata:rowOrder="0"><Name>AUD Australian Dollars</Name><Code>AUD</Code><IsHC>true</IsHC><IsEAN>true</IsEAN><Symbol>$</Symbol></Table><Table diffgr:id="Table2" msdata:rowOrder="1"><Name>CAD Canadian Dollars</Name><Code>CAD</Code><IsHC>true</IsHC><IsEAN>true</IsEAN><Symbol>$</Symbol></Table><Table diffgr:id="Table3" msdata:rowOrder="2"><Name>CHF Swiss Francs</Name><Code>CHF</Code><IsHC>false</IsHC><IsEAN>true</IsEAN><Symbol>CHF</Symbol></Table><Table diffgr:id="Table4" msdata:rowOrder="3"><Name>DKK Danish Kroner</Name><Code>DKK</Code><IsHC>true</IsHC><IsEAN>true</IsEAN><Symbol>kr</Symbol></Table><Table diffgr:id="Table5" msdata:rowOrder="4"><Name>EUR Euros</Name><Code>EUR</Code><IsHC>true</IsHC><IsEAN>true</IsEAN><Symbol>€</Symbol></Table><Table diffgr:id="Table6" msdata:rowOrder="5"><Name>GBP British Pounds</Name><Code>GBP</Code><IsHC>true</IsHC><IsEAN>true</IsEAN><Symbol>£</Symbol></Table><Table diffgr:id="Table7" msdata:rowOrder="6"><Name>HKD Hong Kong Dollars</Name><Code>HKD</Code><IsHC>true</IsHC><IsEAN>true</IsEAN><Symbol>$</Symbol></Table><Table diffgr:id="Table8" msdata:rowOrder="7"><Name>INR Indian Rupee</Name><Code>INR</Code><IsHC>true</IsHC><IsEAN>true</IsEAN><Symbol>Rs</Symbol></Table><Table diffgr:id="Table9" msdata:rowOrder="8"><Name>JPY Japanese Yen</Name><Code>JPY</Code><IsHC>true</IsHC><IsEAN>true</IsEAN><Symbol>¥</Symbol></Table><Table diffgr:id="Table10" msdata:rowOrder="9"><Name>MYR Malaysian Ringgit</Name><Code>MYR</Code><IsHC>true</IsHC><IsEAN>true</IsEAN><Symbol>M$</Symbol></Table><Table diffgr:id="Table11" msdata:rowOrder="10"><Name>NOK Norwegian Kroner</Name><Code>NOK</Code><IsHC>true</IsHC><IsEAN>true</IsEAN><Symbol>kr</Symbol></Table><Table diffgr:id="Table12" msdata:rowOrder="11"><Name>NZD New Zealand Dollars</Name><Code>NZD</Code><IsHC>true</IsHC><IsEAN>true</IsEAN><Symbol>$</Symbol></Table><Table diffgr:id="Table13" msdata:rowOrder="12"><Name>SEK Swedish Kronas</Name><Code>SEK</Code><IsHC>true</IsHC><IsEAN>true</IsEAN><Symbol>kr</Symbol></Table><Table diffgr:id="Table14" msdata:rowOrder="13"><Name>SGD Singapore Dollars</Name><Code>SGD</Code><IsHC>true</IsHC><IsEAN>true</IsEAN><Symbol>$</Symbol></Table><Table diffgr:id="Table15" msdata:rowOrder="14"><Name>THB Thai baht</Name><Code>THB</Code><IsHC>true</IsHC><IsEAN>true</IsEAN><Symbol>฿</Symbol></Table><Table diffgr:id="Table16" msdata:rowOrder="15"><Name>USD U.S. Dollars</Name><Code>USD</Code><IsHC>true</IsHC><IsEAN>true</IsEAN><Symbol>$</Symbol></Table></NewDataSet></diffgr:diffgram></ListCurrencyResult></ListCurrencyResponse>

Here table is my node and name and code is my child nodes.

Refference :

http://think2loud.com/224-reading-xml-with-jquery/
http://api.jquery.com/jquery.parsexml/

enjoy scripting...

3 comments: