How to parse XML string value using jQuery?

Question

I am new to jquery. I am trying to parse xml string using jquery. I have found one sample:

$(function () {
    $.get('data.xml', function (d) {
        var data = "";
        var startTag = "<table border='1' id='mainTable'><tbody><tr><td style=\"width: 120px\">Name</td><td style=\"width: 120px\">Link</td></tr>";
        var endTag = "</tbody></table>";
        $(d).find('url').each(function () {
            var $url = $(this);
            var link = $url.find('link').text();
            var name = $url.find('name').text();
            data += '<tr><td>' + name + '</td>';
            data += '<td>' + link + '</td></tr>';
        });
        $("#content").html(startTag + data + endTag);
    });
});

In this case, I am able to parse and fetch the values from xml file, but now what I am looking for is instead of reading file from a URL, I want to read the xml from string. Say, instead of data.xml I want to parse string which consists of well formed xml.

Does anyone have any idea about this ?

Thanks in advance

Edit : I tried a sample code on following xml;

<?xml version="1.0" encoding="utf-8" ?>
<Urls>
    <url>
        <name>google</name>
        <link>www.google.com</link>
    </url>
    <url>
        <name>aspdotnetcodebook</name>
        <link>http://aspdotnetcodebook.blogspot.com</link>
    </url>
</Urls>

When I try this on xml file, everything works fine. But when I switched to string, it returns nothing for link attribute. I am calling it as;

$(function() {
            var data = $('<?xml version="1.0" encoding="utf-8" ?><Urls><url><name>google</name><link>www.google.com</link></url><url><name>aspdotnetcodebook</name><link>http://aspdotnetcodebook.blogspot.com</link></url></Urls>');
            alert(data);
            doWhateverItIsYourDoing(data);
           });

I am unable to diagnose why this is happening.

Answer 1

Just pass the string directly?

function doWhateverItIsYoureDoing(xml) {
    var data = "";
    var startTag = "<table border='1' id='mainTable'><tbody><tr><td style=\"width: 120px\">Name</td><td style=\"width: 120px\">Link</td></tr>";
    var endTag = "</tbody></table>";
    $(xml).find('url').each(function() {
        var $url = $(this);
        var link = $url.find('link').text();
        var name = $url.find('name').text();
        data += '<tr><td>' + name + '</td>';
          data += '<td>' + link + '</td></tr>';
     });
    $("#content").html(startTag + data + endTag);
}

your .get could be rewritten as:

 $.get('data.xml',doWhateverItIsYoureDoing );

and if you have xml in a string already, then

 var data = "<?xml version=\"1......";
 doWhateverItIsYoureDoing(data);

Answer 2

Note that to properly parse any type of XML file, you want to use the parseXML() function as in:

var xml_jquery_object = jQuery.parseXML(xml);

When you do as presented in the other answers:

var html_jquery_object = jQuery(xml);

you ask jQuery to parse HTML and not XML. The big difference is that HTML removes some tags (body, html, head...) and expects certain tags to be empty (br, hr, ...). So it is likely to break the parsing of your XML file if it somehow includes such tags.

xml can be a direct string as well, of course. The AJAX .get() function returns a string to your function anyway. (The better .ajax() function can return an XML object directly.) So you may define any XML code in that variable as in:

xml = "<?xml version='1.0'?><test>...</test>";

Answer 3

Just put that well-formed XML string into a jQuery object:

var xml = "<?xml version=\"1.0\"?><Dialog><Adam Emotion=\"strong\">I love you!</Adam><Eva Emotion=\"low\">I love you, too!</Eva></Dialog>";

access with

alert($(xml).find('Adam').text());

or

alert($(xml).find('Adam').attr('Emotion'));

Answer 4

put the the XML string into javascript variable

var xmlString = $(‘<?xml version=”1.0″?><Customers><Customer Name=”Allan Border”           Age=”26″ ContactNumber=”004416165245″ Address=”Unit # 24 East London” City=”London”  Country=”England”></Customer><Customer Name=”Jennifer” Age=”28″ ContactNumber=”004416165248″ Address=”Unit # 28 West London” City=”London” Country=”England”></Customer></Customers>’);

Now you can parse the XML as iterate through each of the customer node…

$(xmlString).find("Customer").each(function () {
 var customerName = $(this).attr("Name");
 var age = $(this).attr("Age");
 var contactNumber = $(this).attr("ContactNumber");
 var address = $(this).attr("Address");
 var city = $(this).attr("City");
 var country = $(this).attr("Country");
 });