CODEWITHSUNDEEP
javascripthtmlxml
AMUL
AMUL

Reputation: 291

Displaying XML Attributes in HTML Page

I am working on showing details of XML attributes in an HTML page using JavaScript. My XML file is:

<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>

Code for the HTML is:

<html>
    <body>
    <script type="text/javascript">
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET","cd_catalog.xml",true);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML; 

    document.write("<table border='1'>");
    var x=xmlDoc.getElementsByTagName("CD");
    for (i=0;i<x.length;i++)
    { 
        document.write("<tr><td>");
        document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
        document.write("</td><td>");
        document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
        document.write("</td></tr>");
    }
    document.write("</table>");
    </script>
    </body>
</html>

The problem is that nothing is shown in the browser. Is there any problem in the code above?

Upvotes: 1

Views: 1471

Answers (1)

bobince
bobince

Reputation: 536339

xmlhttp.open("GET","cd_catalog.xml",true);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

The true here gives you an asynchronous HTTP request. It goes off to fetch the document in the background and calls back onreadystatechange with readyState==4 when it has finished. This will probably not have happened by the next statement where you read responseXML.

If you want a synchronous request, that will pause the browser and not execute the next line until the document fetch is complete, use false instead.

However be aware that the browser ‘hang’ that results is generally considered highly undesirable. Normally, you should use asynchronous requests with a callback function in preference. However such a function would have to use DOM methods to write the content to the page and not the old-school document.write which is only available at page load time.

Finally, you're not HTML-escaping the nodeValues you read when writing them to the document, so if there's any < or & character in the data, you've got problems.

ETA: here's an untested example of doing it asynchronously with DOM methods:

<table id="cds"></table>
<script type="text/javascript">

    var xhr= window.XMLHttpRequest? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    xhr.onreadystatechange= function() {
        if (this.readyState===4 || this.status===200)
            populateTable(this.responseXML);
    };
    xhr.open('GET', 'cd_catalog.xml', true);
    xhr.send();

    function populateTable(xml) {
        var table= document.getElementById('cds');
        var cds= xml.getElementsByTagName('CD');
        for (var i= 0; i<cds.length; i++) {
            var row= table.insertRow(-1);

            function getProperty(name) {
                var el= cds[i].getElementsByTagName(name)[0];
                if (el.firstChild)
                    return el.firstChild.data;
                return ''; // allow empty elements
            }
            function addCell(value) {
                row.insertCell(-1).appendChild(document.createTextNode(value));
            }

            addCell(getProperty('ARTIST'));
            addCell(getProperty('TITLE'));
        }
    };

</script>

Upvotes: 3

Related Questions