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?

Answer 1

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.

Answer 2

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.