CODEWITHSUNDEEP
javascriptjqueryxmlajax
MissCoder87
MissCoder87

Reputation: 2669

Parsing XML with Javascript (for eventual use in phonegap)

I'm trying to parse some XML results in javascript to use with phonegap. As it stands my xml layout is:

<Results>
     <Result>
          <FirstName>John</FirstName>
          <Surname>Beech</Surname>
          <Company>CompanyName</Company>
          <Job_Title>Property Department</Job_Title>
          <UserID>184</UserID>
          <CompanyID>CompanyID</CompanyID>
          </Result>
     <Result>
          <FirstName>Rosie</FirstName>
          <Surname>Beech</Surname>
          <Company>CompanyName</Company>
          <Job_Title>Job Title</Job_Title>
          <UserID>10494</UserID>
          <CompanyID>17322</CompanyID>
     </Result>
</Results>

And I'm using the following javascript to at the moment just alert out the responses, but eventually I want to create a table of the responses.

<script language="javascript" type="text/javascript">
    window.onload = function () {
        $.ajax({
            type: 'GET',
            url: 'Lookupbysurname.aspx?surname=beech',
            dataType: 'html',
            success: function (data) {


                try {
                    xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
                    xmlDoc.async = "false";
                    xmlDoc.loadXML(data);
                }
                catch (e) {
                    try {
                        parser = new DOMParser();
                        xmlDoc = parser.parseFromString(data, "text/xml");
                    }
                    catch (e) {
                        alert(e.message);
                        return;
                    }
                }

                for (var i = 0; i < xmlDoc.getElementsByTagName("CompanyID")[0].childNodes[0].length; i++) {
                    alert(xmlDoc.getElementsByTagName("CompanyID")[0].childNodes[0].nodeValue);
                }
            }
        });
    }
</script>

However at the moment it's only alerting the same response out over and over. Have I put the loop together wrong? Loops in JS arent my forte! Any help will be appreciated.

Upvotes: 0

Views: 2749

Answers (2)

Tim Down
Tim Down

Reputation: 324547

You can avoid using parseXML() by using XMLHttpRequest's responseXML property, which is wrapped in jQuery as follows:

$.ajax({
    type: 'GET',
    url: 'Lookupbysurname.aspx?surname=beech',
    dataType: 'xml',
    success: function(xmlDoc) {
        alert(xmlDoc.getElementsByTagName("CompanyID")[0].nodeValue);
    }
});

Since you're already using jQuery, you could use jQuery to traverse the XML:

var $xml = $(xmlDoc);
$xml.find("CompanyID").each(function() {
    alert( $(this).text() );
});

Full code:

$.ajax({
    type: 'GET',
    url: 'Lookupbysurname.aspx?surname=beech',
    dataType: 'xml',
    success: function(xmlDoc) {
        var $xml = $(xmlDoc);
        $xml.find('CompanyID').each(function() {
            alert( $(this).text() );
        });
    }
});

Upvotes: 2

T.J. Crowder
T.J. Crowder

Reputation: 1074198

However at the moment it's only alerting the same response out over and over.

Of course it is, you're using the same index (0) each time.

But the TL;DR version of this is: Since you're already using jQuery, just use jQuery. You can not only use it to replace your complex parser creation logic by using $.parseXML instead, but you can also use jQuery to do the loop. Here I assume you're trying to loop over CompanyID elements:

var xmlDoc = $.parseXML(data);
var $xml = $(xmlDoc);
$xml.find("CompanyID").each(function() {
    alert($(this).text());
});

Live example | source

Building up to that, your code is using 0 rather than i:

for (var i = 0; i < xmlDoc.getElementsByTagName("CompanyID")[0].childNodes[0].length; i++) {
    // This is always 0 -----------------------------------------v 
    alert(xmlDoc.getElementsByTagName("CompanyID")[0].childNodes[0].nodeValue);
}

You want to use i, not 0, if you want to loop over the child nodes.

But that loop is hugely inefficient, because you're going back and repeating the lookup each time. Instead:

var nodes = xmlDoc.getElementsByTagName("CompanyID")[0].childNodes;
for (var i = 0; i < nodes.length; i++) {
    alert(nodes[i].nodeValue);
}

Or alternately, of course, use firstChild and nextSibling:

var node;
for (node = xmlDoc.getElementsByTagName("CompanyID")[0].firstChild;
     node;
     node = node.nextSibling) {
    alert(node.nodeValue);
}

But looking at your XML, I suspect you want to loop over CompanyID nodes, rather than the child nodes of them:

var node;
for (node = xmlDoc.getElementsByTagName("CompanyID");
     node;
     node = node.nextSibling) {
    alert(node.firstChild.nodeValue);
}

But again, you can do this with dramatically less code by making more use of the library you're already using. :-)

Upvotes: 2

Related Questions