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

2 comments:

  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a .Net developer learn from Dot Net Training in Chennai. or learn thru Dot Net Training in Chennai. Nowadays Dot Net has tons of job opportunities on various vertical industry.
    or Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry.

    ReplyDelete