[jQuery] Get first child of xml node

Question

Hi, I have this xml file. I would extract the first child of Status node and alert it. How I can do it?

  <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
  <ns3:ExecuteResponse xmlns:ns1="http://www.opengis.net/ows/1.1" xmlns:ns2="http://www.w3.org/1999/xlink" xmlns:ns3="http://www.opengis.net/wps/1.0.0" statusLocation="http://r/6de0e29d-8d67-40c3-8189-03f7cd23a0cb" serviceInstance="http://-service/services/http-post" version="1.0.0" service="WPS">
    <ns3:Process ns3:processVersion="0.2">
        <ns1:Identifier>123</ns1:Identifier>
        <ns1:Title xml:lang="en-US">Bioclim</ns1:Title>
        <ns1:Abstract xml:lang="en-US">Uses mean and standard deviation for each environmental variable separately to calculate bioclimatic envelopes. Level of fitness between the environmental values on a point and the respective envelopes classifies points as Suitable, Marginal, or Unsuitable for presence.
Implements the Bioclimatic Envelope Algorithm. For each given environmental variable the algorithm finds the mean and standard deviation (assuming normal distribution) associated to the occurrence points. Each variable has its own envelope represented by the interval [m - c*s, m + c*s], where 'm' is the mean; 'c' is the cutoff input parameter; and 's' is the standard deviation. Besides the envelope, each environmental variable has additional upper and lower limits taken from the maximum and minimum values related to the set of occurrence points.
In this model, any point can be classified as:
 Suitable: if all associated environmental values fall within the calculated envelopes;
 Marginal: if one or more associated environmental value falls outside the calculated envelope, but still within the upper and lower limits.
 Unsuitable: if one or more associated enviromental value falls outside the upper and lower limits.
Bioclim's categorical output is mapped to probabilities of 1.0, 0.5 and 0.0 respectively.</ns1:Abstract>
    </ns3:Process>
    <ns3:Status creationTime="2010-07-08T16:33:03.326+02:00">

        <ns3:ProcessStarted/>
    </ns3:Status>
    <ns3:ProcessOutputs>
        <ns3:Output>
            <ns1:Identifier>servicesDocuments</ns1:Identifier>
            <ns1:Title xml:lang="en-US">A json document in which can be published some XML documents relative to the run</ns1:Title>
            <ns3:Data>
                <ns3:LiteralData>http://hermes.pin.unifi.it:9090/wps-1.0.0-service/publisher/953baf3a-dddf-49cc-a673-7491d82f80b7&lt;/ns3:LiteralData&gt;

            </ns3:Data>
        </ns3:Output>
        <ns3:Output>
            <ns1:Identifier>extendedStatus</ns1:Identifier>
            <ns1:Title xml:lang="en-US">WPS status in JSON format</ns1:Title>
            <ns3:Data>
                <ns3:LiteralData>{&quot;globalStatus&quot;:&quot;processExecution&quot;,&quot;resourceList&quot;:[]}</ns3:LiteralData>

            </ns3:Data>
        </ns3:Output>
    </ns3:ProcessOutputs>
</ns3:ExecuteResponse>

I am using jQuery. I have converted the xml in dom and now I have to query it for extracting the child of Status node.

 $.ajax({
    type: 'GET',
    url: "php/proxy.php?proxy_url=" + obj.requests[i].output,
                        contentType: "text/xml",
    dataType: "text/xml",
    async:false,
    success: function(xml){
      var $dom = $.xmlDOM(xml, function(error){
     alert('A parse error occurred! ' + error);
    });
                                //extract data

      }});

Thanks a lot.

Answer 1

Use the "xml" dataType to avoid having to parse the XML. (This the third time I've suggested this to you. You've never said why you can't do that). Note that in IE the first child will be a <ns3:ProcessStarted> element while in other browsers it will be a text node containing whitespace.

$.ajax({
    type: 'GET',
    url: "php/proxy.php?proxy_url=" + obj.requests[i].output,
    contentType: "text/xml",
    dataType: "xml",
    async: false,
    success: function(xml) {
        var statusNode = xml.getElementsByTagName("ns3:Status")[0];
        alert(statusNode.firstChild);
    }
});

You could wrap the XML document in a jQuery object if you like, and that will get round the problem of the whitespace node by ignoring it:

$.ajax({
    type: 'GET',
    url: "php/proxy.php?proxy_url=" + obj.requests[i].output,
    contentType: "text/xml",
    dataType: "xml",
    async: false,
    success: function(xml) {
        var node = $(xml).find("ns3\\:Status").find(":first-child");
        alert(node[0].tagName);
    }
});

Answer 2

There are some pretty good jQuery plugins that could help with this. I recently used one of the xml2json plugins, so I could reference specific parts of my returned XML using JSON syntax.

var ExecuteResponse = jQuery.xml2json(xml);
var firstStatusChild = ExecuteResponse.Status[0];

Answer 3

This is working for me. I optimized how you're handling the url you're getting the xml from.

var url = 'php/proxy.php';
var obj = { requests: [{output: 'foo'}] }, i = 0; // shims
$.ajax({
    url: url,
    type: 'GET',
    // This is a better way to pass querystring params
    data: { 'proxy_url': obj.requests[i].output },
    dataType: "xml",
    async: false,
    success: function(xmlData, textStatus, XMLHttpRequest){
        // How do we get ahold of the ns3:Status element?
        // We must escale the ":" character:
        var $ns3Status = $('ns3\\:Status', xmlData);
        alert($ns3Status.attr('creationTime')); // we can get an attribute
        alert($ns3Status.get(0).tagName); // we can get tagName

        // Let's iterate over the children of the ns3:Status element
        $ns3Status.children().each(function(){
            alert($(this).get(0).tagName);
        });
    }
});