Tuesday, 21 January 2014

XML parsing with namespaces using jQuery/JavaScript

So many times XML will come with namespaces specially when data comes from web service.
Developers get confused to handle that data using jQuery/Javascript.
I was the same who was suffering from this type of problem.
Here i am sharing my way to handle this.

I used following js for this.

<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/jscript"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js" type="text/jscript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/jscript"></script>

Demo xml:

<SearchResponse>
<SearchResult>
<a:BookingRequest.DetailsSearch>
 <a:ErrorMessage i:nil="true"/>
 <a:Name>Sydney, Australia</a:Name>
 <a:Number>1</a:Number>
 <a:Url>test.aspx?City=Sydney&Country=Australia</a:Url>
 <a:type>City</a:type>
 </a:BookingRequest.DetailsSearch>
<a:BookingRequest.DetailsSearch>
 <a:ErrorMessage i:nil="true"/>
 <a:Name>Sydney, Canada</a:Name>
 <a:Number>2</a:Number>
 <a:Url>test.aspx?City=Sydney&Country=Canada</a:Url>
 <a:type>City</a:type>
 </a:BookingRequest.DetailsSearch>
<a:BookingRequest.DetailsSearch>
 <a:ErrorMessage i:nil="true"/>
 <a:Name>North Sydney, Canada</a:Name>
 <a:Number>3</a:Number>
 <a:Url>test.aspx?City=North Sydney&Country=Canada</a:Url>
 <a:type>City</a:type>
 </a:BookingRequest.DetailsSearch>
<a:BookingRequest.DetailsSearch>
 <a:ErrorMessage i:nil="true"/>
 <a:Name>North Sydney, Australia</a:Name>
 <a:Number>4</a:Number>
 <a:Url>test.aspx?City=North Sydney&Country=Australia</a:Url>
 <a:type>City</a:type>
 </a:BookingRequest.DetailsSearch>
</SearchResult>
</SearchResponse>

Here i am parsing the XML and storing the data into array.
Now you can use this array according to your requirement.
Here both the code i am sharing for IE and other browser.

Here is my code.

if ($.browser.msie && window.XDomainRequest) {
                if (window.XDomainRequest) {
                    var query = 'Your URL Here';
                    var xdr = new XDomainRequest();
                    if (xdr) {
                        xdr.onload = function () {
                            searchtext = request.term;
                            data = $.parseXML(xdr.responseText);
                            var item = [];
                            var pets = data.getElementsByTagName("a:BookingRequest.DetailsSearch");
                            var Name = data.getElementsByTagName("a:Name");
                            var Number = data.getElementsByTagName("a:Number");
                            var Url = data.getElementsByTagName("a:Url");
                            var type = data.getElementsByTagName("a:type");

                            for (var i = 0; i < pets.length; i++) {
                                var obj = { value: Name[i].textContent.toString(), URL: Url[i].textContent.toString(), Number: Number[i].textContent.toString(), Type: type[i].textContent.toString() };
                                item.push(obj);
                            }
                            response(item);
                        }
                        xdr.onerror = function () { /* error handling here */ }
                        xdr.open('GET', query);
                        xdr.send();
                    }
                }
            }
            else {
                var query = 'Your URL Here';
                $.ajax({
                    type: "GET",
                    crossDomain: true,
                    url: query,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data1) {
                        if (data1 != null) {
                            var data = data1.SearchResult;
                            var item = [];
                            for (var i = 0; i < data.length; i++) {
                                var obj = { value: data[i].Name, URL: data[i].Url, Number: data[i].Number, Type: data[i].type };
                                item.push(obj);
                            }
                            response(item);
                        }
                    },
                    error: function (response, textStatus, errorThrown) {
                        alert(errorThrown);
                    }
                });
            }
        }


Now if you want to directly bind these XML data into page then just use following

var count = 0;
$(data).find('SearchResult').each(function () {

    var Name = $(this).find('a\\:Name').text();
    var Number = $(this).find('a\\:Number').text();
    var Url = $(this).find('a\\:Url').text();
    var type = $(this).find('a\\:type').text();  
    count++;
});

I used count only to check number of occurrence of XML node.
You can use this value any way you like.

Hope this will help and save your time.
Happy coading...

No comments:

Post a comment