CODEWITHSUNDEEP
javascripthtmlajaxxml
user3362954
user3362954

Reputation: 1249

Getting XML to display in HTML

I've been messing with some script online to parse out an XML to display it in a table. Unfortunately, unlike in the examples I've seen around, mine isn't displaying a table. 

<html>
    <head>
    </head>
    <body>
    <script>

    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    }
    else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.open("GET","europe.xml",false);
    xmlhttp.send();
    xmlDoc = xmlhttp.responseXML; 

    document.write("<table border='1'>");

    var x = xmlDoc.getElementsByTagName("country");

    for (i = 0; i < x.length; i++) { 
        document.write("<tr><td>");
        document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
        document.write("</td><td>");
        document.write(x[i].getElementsByTagName("users")[0].childNodes[0].nodeValue);
        document.write("</td></tr>");
    }

    document.write("</table>");
    </script>
    </body>
</html>

and this is europe.xml

<?xml version="1.0" ?>
<continent name="Europe">
    <country>
        <name>Albania</name>
        <users>1.6 Million</users>
    </country>
    <country>
        <name>Austria</name>
        <users>6.7 Million</users>
    </country>
    <country>
        <name>Belgium</name>
        <users>8.6 Million</users>
    </country>
</continent>

Upvotes: 2

Views: 3116

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 205987

jsBin demo

// Just a reusable function. See use below.
function nodeVal(el, tag) {
  return el.getElementsByTagName(tag)[0].childNodes[0].nodeValue;
}

var xmlhttp = window.XMLHttpRequest?
  new XMLHttpRequest():
  new ActiveXObject("Microsoft.XMLHTTP"); /*IE*/

// AJAX is asyncronous, so wait for a response
xmlhttp.onreadystatechange = function () {
  if (this.readyState == 4) { // Good to go!
    var XML,
        TXT = this.responseText; // Get the XML string

    if (window.DOMParser){       // Parse
      XML = new DOMParser().parseFromString(TXT,"text/xml");
    }else {                      // IE
      XML = new ActiveXObject("Microsoft.XMLDOM");
      XML.async = false;
      XML.loadXML(TXT);
    }

    // Get desired elements from XML
    var el  = XML.getElementsByTagName("country");

    // Loop elements and retrieve data
    var html = "<table border='1'>";    // Ok, actually a string :)
    for(var i=0; i<el.length; i++){     // concatenate our string
      html += "<tr><td>"+ nodeVal(el[i], "name") +"</td>"+
                  "<td>"+ nodeVal(el[i],"users") +"</td></tr>";
    }
    html += "</table>";

    // Finally append our html String
    document.body.innerHTML = html;
  }
};

xmlhttp.open("GET", "europe.xml", false);
xmlhttp.send();

tested also in IE7

Upvotes: 1

helderdarocha
helderdarocha

Reputation: 23637

It's better to generate the table in a string and then append the generated HTML to an existing element using DOM.

1) Add a container to your HTML where you wish to place the table:

<html><body>
...
    <div id="container"></div>
...
</body></html>

2) Load the XML file:

var client;
if (window.XMLHttpRequest) {
    client = new XMLHttpRequest();
}
else {
    client = new ActiveXObject("Microsoft.XMLHTTP");
}
client.open('GET', 'europe.xml');

3) Read the file contents. This should be done inside an Ajax callback function, to assure that the file is read before processing begins. Normally you would test the response code, etc.Here is an example:

client.onreadystatechange = function() { // will run when the file loads
    // get the response XML
    var xmlDoc = client.responseXML;

    // get the list of countries
    var countries = xmlDoc.getElementsByTagName("country");

    ... // the rest of the code (see below)
}

client.send(); // this will send the request which will be captured by the function above

4) Get the list of <country> elements (this is in the code above): 

var countries = xmlDoc.getElementsByTagName("country");

5) Get the container div where the table will be added:

var container = document.getElementById("container");

6) Create an HTML table in a string and put the element data inside it:

var tableString = "<table border='1'>"; // Make a table and put the element data inside it
for (i = 0; i < countries.length; i++) {
    tableString += "<tr><td>";
    tableString += countries[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
    tableString +="</td><td>";
    tableString += countries[i].getElementsByTagName("users")[0].childNodes[0].nodeValue;
    tableString += "</td></tr>";
}
tableString += "</table>";

7) Append the table to the container:

container.innerHTML = tableString;

This example uses pure JavaScript. You might also want to try a solution using JQuery which will probably reduce the lines of code above to about half.

See http://jsfiddle.net/helderdarocha/N2nER/ for an example (I used an embedded XML instead of Ajax in the fiddle, to avoid loading an external file)

UPDATE: Here's the entire HTML page, in case you have trouble assembling the parts:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>

        var client;
        if (window.XMLHttpRequest) {
            client = new XMLHttpRequest();
        }
        else {
            client = new ActiveXObject("Microsoft.XMLHTTP");
        }
        client.open('GET', 'europe.xml');

        client.onreadystatechange = function() { // will run when the file loads
            // get the response XML
            var xmlDoc = client.responseXML;

            // get the list of countries
            var countries = xmlDoc.getElementsByTagName("country");

            // get the container where you want to embed the table
            var container = document.getElementById("container");

            var tableString = "<table border='1'>"; // Make a table and put the element data inside it
            for (i = 0; i < countries.length; i++) {
                tableString += "<tr><td>";
                tableString += countries[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
                tableString +="</td><td>";
                tableString += countries[i].getElementsByTagName("users")[0].childNodes[0].nodeValue;
                tableString += "</td></tr>";
            }
            tableString += "</table>";

            // append the table to the container
            container.innerHTML = tableString;
        }

        client.send();

    </script>
</head>
<body>
    <h1></h1>
    <div id="container"></div>
</body>
</html>

Upvotes: 1

Related Questions