How to Parse XML Response Using jQuery

Question

I am trying to parse an xml response using jQuery and just output an element the a page but i am unsuccessful in this.

Below is the code that I am using for the response & parsing of it.

$.ajax({
    url: UCMDBServiceUrl,
    type: "POST",
    dataType: "xml",
    data: soapMessage,
    success: UCMDBData,
    crossDomain: true,
    contentType: "text/xml; charset=\"utf-8\""
});
alert("Sent2");
return false;
}

function UCMDBData(xmlHttpRequest, status, msg)
{
     alert("Came back1");
     $(xmlHttpRequest.responseXML).find('tns:CIs').each(function()
     {
        alert("Came back2");
        $(this).find("ns0:CI").each(function()
        {
            alert("Came back3");
            $("#output").append($(this).find("ns0:ID").text());
        });
     });     
}

I am receiving alerts for "Came back1" but it doesnt appear to be going any further. Below is the XML Response that I am trying to parse using my above jquery code. The text that I am ultimately trying to return out of the response is in this element

<?xml version='1.0' encoding='utf-8'?>
<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/"><soapenv:Header />
    <soapenv:Body>
        <tns:getFilteredCIsByTypeResponse xmlns:ns0="http://schemas.hp.com/ucmdb/1/types" xmlns:ns1="http://schemas.hp.com/ucmdb/ui/1/types" xmlns:ns2="http://schemas.hp.com/ucmdb/1/types/query" xmlns:ns3="http://schemas.hp.com/ucmdb/1/types/props" xmlns:ns4="http://schemas.hp.com/ucmdb/1/types/classmodel" xmlns:ns5="http://schemas.hp.com/ucmdb/1/types/impact" xmlns:ns6="http://schemas.hp.com/ucmdb/1/types/update" xmlns:ns7="http://schemas.hp.com/ucmdb/discovery/1/types" xmlns:ns8="http://schemas.hp.com/ucmdb/1/types/history" xmlns:tns="http://schemas.hp.com/ucmdb/1/params/query">
            <tns:CIs>
                <ns0:CI>
                    <ns0:ID>4d030502995a00afd989d3aeca2c990c</ns0:ID>
                    <ns0:type>nt</ns0:type>
                    <ns0:props>
                        <ns0:strProps>
                            <ns0:strProp>
                                <ns0:name>name</ns0:name>
                                <ns0:value>prodoo</ns0:value>
                            </ns0:strProp>
                        </ns0:strProps>
                        <ns0:booleanProps>
                            <ns0:booleanProp>
                                <ns0:name>host_iscomplete</ns0:name>
                                <ns0:value>false</ns0:value>
                            </ns0:booleanProp>
                        </ns0:booleanProps>
                    </ns0:props>
                </ns0:CI>
            </tns:CIs>
            <tns:chunkInfo>
                <ns0:numberOfChunks>0</ns0:numberOfChunks>
                <ns0:chunksKey>
                    <ns0:key1 />
                    <ns0:key2 />
                </ns0:chunksKey>
            </tns:chunkInfo>
        </tns:getFilteredCIsByTypeResponse>
    </soapenv:Body>
</soapenv:Envelope>

So my question is that how do I properly parse the data? I believe the code syntax is correct but I am not getting the expected returned results. I would appreciate any help, thanks.

EDIT

I have modified my code to the following like the suggestion, but still no luck:

$.ajax({
    url: UCMDBServiceUrl,
    type: "POST",
    dataType: "xml",
    data: soapMessage,
    success: UCMDBData,
    crossDomain: true,
    contentType: "text/xml;"
    });
alert("Sent2");
return false;
}

function UCMDBData(data, textStatus, jqXHR) {
    alert("Came back1");
    $(data).find('tns:CIs').each(function () {
        alert("Came back2");
        $(this).find("ns0:CI").each(function () {
            alert("Came back3");
            $("#output").append($(this).find("ns0:ID").text());
            document.AppServerForm.outputtext.value = document.AppServerForm.outputtext.value + "http://localhost:8080/ucmdb/cms/directAppletLogin.do?objectId=" + $(this).find('ns0:ID').text() +"&infopane=VISIBLE&navigation=true&cmd=ShowRelatedCIs&interfaceVersion=8.0.0&ApplicationMode=ITU&customerID=1&userName=admin&userPassword=admin";

    });
});

}

When I execute the only alert message i receive back is "Came back1" which means that the code is still not going through the xml properly with jquery. Any other suggestions?

Are you trying to match a single instance of ns0:CI, or can it appear more than once? — JesseBuesking, Nov 29 '11 at 23:11
There is only a single instance of ns0:CI being returned as you can see in the XML response that I posted here also. — user1013396, Nov 29 '11 at 23:13

score 2 · Accepted Answer · edited May 23 '17 at 12:15

2

The namespace-scoped names need to be handled a little differently. According to this answer: jQuery XML parsing with namespaces you would need to use an attribute selector [@nodeName=tns:CIs] instead.

You may need to drop the "@" for jQuery versions later than 1.3. Another suggestion is to escape the colon: .find('tns\:CIs'), which is hacky because it conflates the syntactic prefix with the semantic namespace (the uri). So if the prefix changed this method would break. A more correct answer will recognize the mapping of prefix to namespace uri. The jquery-xmlns plugin for namespace-aware selectors looks promising in that respect.

edited May 23 '17 at 12:15

Community

1
1

answered Nov 29 '11 at 23:14

jerseyboy

1,298
13
13

Actually I am still having issues, this is working in Firefox, but not IE 8 (Which is what is being used here). – user1013396 Nov 29 '11 at 23:29
1

The nodeName filter with namespace prefix no longer works in jQuery 1.7. – jerseyboy Nov 30 '11 at 14:22
Turns out the IE issues are due to me connecting to the WSDL with authentication being passed in the url.. I.e. http://user:pass@mywebservice.com, in order to resolve this i need to do simple authentication in the XML (Soap) header. – user1013396 Nov 30 '11 at 16:01
For the record, what version of jQuery are you using, in which the solution worked? – jerseyboy Nov 30 '11 at 22:42

Kevin Ji · Answer 2 · 2011-11-29T22:59:32.350

Your jQuery success function is of the wrong form. It needs to be of the form

function UCMDBData(data, textStatus, jqXHR) {
    alert("Came back1");
    $(data).find('tns:CIs').each(function () {
        alert("Came back2");
        $(this).find("ns0:CI").each(function () {
            alert("Came back3");
            $("#output").append($(this).find("ns0:ID").text());
        });
    });
}

In addition, in your $.ajax function, change the contentType line to be contentType: "text/xml" instead of what you have before (assuming that you're sending XML to the server).

See the jQuery.ajax() documentation for more information.

score 1 · Answer 3 · answered Nov 29 '11 at 23:28

1

Based on your comment, why do something crazy with jQuery? Just use javascript itself!

var open = '<ns0:ID>';
var close = '</ns0:ID>';

var start = obj.indexOf(open) + open.length;
var end = obj.indexOf(close);

var result = obj.slice(start, end);

Here's a jsfiddle that shows it in action.

answered Nov 29 '11 at 23:28

JesseBuesking

6,496
4
44
89

1

It works with this specific example, but will break if the node has attributes. – Christophe Dec 05 '11 at 05:10

score 0 · Answer 4 · answered Nov 29 '11 at 22:57

0

Probably the right syntax would be

success: function(xml) {
    $(xml).find('tns:CIs').each(function() {
    ......

answered Nov 29 '11 at 22:57

u.k

3,091
1
20
23

How to Parse XML Response Using jQuery

4 Answers4