How to display first child in XML text with Javascript

I am attempting to display the content of an XML file's first child "CD" (only the title and artist).

I was trying to use the suggestions from the following pages: Load xml file content into div using jquery xml dom parsing

However, even copy/paste-ing the code from those pages and altering it to point to my xml still displays a blank page.

Here is an example of the XML that I am using:


<?xml version="1.0" encoding="UTF-8"?>
<!-- Edited by XMLSpy -->
<CATALOG>
    <CD>
        <TITLE>Empire Burlesque</TITLE>
        <ARTIST>Bob Dylan</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>Columbia</COMPANY>
        <PRICE>10.90</PRICE>
        <YEAR>1985</YEAR>
    </CD>
    <CD>
        <TITLE>Hide your heart</TITLE>
        <ARTIST>Bonnie Tyler</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>CBS Records</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1988</YEAR>
    </CD>

</CATALOG>

And here is my HTML:


<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title>WAFT</title>
    <script type="text/javascript" src="http://ift.tt/uyExtg"></script>
    <!--[if IE]>
        <script src="http://ift.tt/oHTnA7"></script>
    <![endif]-->
</head>
<body>

<div id="output">
 Please stand-by.
</div>

<script>
// Load the xml file using ajax 
$.ajax({
    type: "GET",
    url: "cd_catalog.xml",
    dataType: "xml",
    success: function (xml) {

        // Parse the xml file and get data
        var xmlDoc = $.parseXML(xml),
            $xml = $(xmlDoc);
        $xml.find('TITLE').each(function () {
            $("#output").append($(this).text() + "<br />");
        });
    }
});
</script>
</body>
</html>

I want to output the XML text in the div replacing the text.

Any help in pointing to at least a "Dummies" tutorial would be great as I am still new to Javascript. Thanks in advance.

How to display first child in XML text with Javascript

No comments:

Post a Comment