ABC the iSchool

In developing the web page, it would be clever to make sure that the HTTPRequest is actually working and that you can represent its contents as a nodeset. Here I'm testing the "length" attribute of the nodeset.

var curricula = response.documentElement;
var curriculum = curricula.childNodes;	
alert(curriculum.length);

If you follow my example code above, "curriculum" is a nodeset of curriculum nodes. Each curriculum node is composed of a set of child nodes named "name", "college-fullname" and so on. Here is a snippet of the XML document that you are unpacking.

<?xml version="1.0" standalone="yes"?>
<curricula>
 <curriculum>
  <uri>http://webservices.washington.edu/courses/0.2/Seattle/A%20A</uri>
  <name>A A</name>
  <fullname>AERONAUTICS & ASTRONAUTICS</fullname>
  <campus-name>Seattle</campus-name>
  <department>A A</department>
  <department-fullname>AERONAUTICS & ASTRONAUTICS</department-fullname>
  <college>ENGR</college>
  <college-fullname>COLLEGE OF ENGINEERING</college-fullname>
 </curriculum>
 

The general strategy is fairly straight forward. Build a loop that will expose each child node of curriculum. Build an inner loop that exposes all the child nodes and look for "fullname", "college-fullname", etc. Put these into separate <TD> elments and then the two of them into a <TR> element. Add the <TR> elements to a single big DIV element. When you've finished looping, insert this DIV element as the innerHTML of the <TABLE> element in the webpage.

For you reference, here's some code to build an HTML table

<table border="1" cellpadding="5" cellspacing="5" width="100%">
<tr>

<th>Table header</th>
<th>Table header</th>

</tr>

<tr>
<td width="20%">Table cell 1</td><td>Table cell 2</td>
</tr>
</table>

A suggested looping

I targeted the table node with the ID "showABC". Then cycled through the curriculum nodes. For each curriculum node, I created a new TR element and then exposed the "fullname" node and put it in a new TD node. Then I exposed the "college-fullname" and put it in a new TD node. Then I added these two new TD nodes to the TR node. Once you have loaded the two new TD nodes to the TR node, you can add the TR node to the collector DIV.

Eventually, you can give the innerHTML of the DIV node to the innerHTML to your table element with the ID "showABC".

// Target the table element
var q = document.getElementById("showABC");

// Create a DIV that will become the tables innerHTML
var tableContents = document.createElement("DIV");

// The basic loop through the nodeset

for (var i = 0; i < YOUR_NODESET_ELEMENT.length; i++)

// Get the childnodes of YOUR_NODESET_ELEMENT[i]
var aspects = YOUR_NODESET_ELEMENT[i].childNodes

// Create a table row element
var p = document.createElement("tr");

// Test that the nodeName is "fullname"
See note below for origin of "aspects"
if (aspects[j].nodeName == "fullname")
// Collect the "fullname" as content for a table data element
var td1 = document.createElement("td");

// Add the table data element to the table row
p.appendChild(td1);

// Test that the nodeName is "college-fullname"
if(aspects[j].nodeName == "college-fullname")
// Collect the "college-fullname" as content for a table data element
var td2 = document.createElement("td");
// Add the table data element to the table row
p.appendChild(td2);

// Add the table row to the table contents DIV
tableContents.appendChild(p);

// Give the tableContents to the table element

q.innerHTML = tableContents.innerHTML;

When you harvest the information from the "fullname" and "college-fullname" nodes, recognize that the text value you want is the firstChild text value of the node.

var aspects = curriculum[i].childNodes;
...
aspects[j].nodeName == "fullname"
...

var thisTableNode = document.createElement("td");
var thisTableNodeValue = document.createTextNode(aspects[j].firstChild.nodeValue);
thisTableNode.appendChild(thisTableNodeValue);

Demo display of node value

function zango(response)
{
    var curricula = response.documentElement;
    var curriculum = curricula.childNodes;	
    var aspects = curriculum[7].childNodes;
	
    //alert(aspects.length);
	
    for (var h = 0; h < aspects.length; h++)
    {
      if (aspects[h].nodeName == "department")
      {
        alert(aspects[h].firstChild.nodeValue);
      }
    }

}