Cannot get xml data with jQuery

Question

I'm trying to get XML data from server, the XML format looks like this:

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<env:Envelope xmlns:env="httpd://www.w3.org/org/2003/05/spap-envlop" env:encodingStyle="httpd:
//www.w3.org/org/2003/05/spap-envlop">
    <env:Body>
        <ip>0.0.0.0</ip>
        <domain>Website</domain>
    </env:Body>
</env:Envelope>

And I can see all the XML data from Google chrome console with $.get method:

$(function() {
    $.get("../setup/web.xml", function (data) {
        console.log(data)
    });
});

In the Google chrome console message, it shows "#document" and a small arrow sign tells me that's a fold up message, then I click the arrow sign, my XML data showed up. But I still can't figure out why can't I get XML tag's text from my code below:

$(function() {
    $.get("../setup/web.xml", function (data) {
        $("#ip").text(data.ip) //undefined
        $("#domain").text(data.domain) //undefined
    });
});

Or even this one:

$(function() {
    $.get("../setup/web.xml", function (data) {
        $(data).find("env:Body").each(function () {
            $("#ip").text(ip) //undefined
            $("#domain").text(domain) //undefined
        }
    });
});

Rory McCrossan · Accepted Answer · 2017-05-23 07:45:04Z

1

The issue is due to the way you're accessing the returned data. You're using dot notation which is the method used for accessing an object. You're returning XML, so you'll need to traverse the nodes to find the values you require. Also note that you'll need to escape the : in the node name otherwise jQuery will interpret this as a psuedo selector. Try this:

// imagine this is the response text from the request
var data = '<?xml version="1.0" encoding="UTF-8" standalone="yes" ?><env:Envelope xmlns:env="httpd://www.w3.org/org/2003/05/spap-envlop" env:encodingStyle="httpd://www.w3.org/org/2003/05/spap-envlop"><env:Body><ip>0.0.0.0</ip><domain>Website</domain></env:Body></env:Envelope>';

// this would be inside the callback function of your AJAX request:
var $xml = $(data);
$xml.find('env\\:Body').each(function() {
  var ip = $(this).find('ip').text();
  var domain = $(this).find('domain').text();

  $("#ip").append(ip);
  $("#domain").append(domain);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ip"></div>
<div id="domain"></div>

answered May 23, 2017 at 7:45

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

S.P. Over a year ago

Thx for the answer! I'm wondering if the XML data is really really big, and have lots of tags and data in it. What should I do in the first step "var data"?

Rory McCrossan Over a year ago

You wouldn't need that in your actual code - that's just for the sake of this example as I cannot recreate your AJAX request. You only need the part from var xml = ... to the end

Collectives™ on Stack Overflow

Cannot get xml data with jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related