title: How to loop through XML nodes and child nodes using JavaScript?
body: <p>I'm currently having an issue with looping through XML nodes and displaying their child elements.</p>
  
  <p>Here is what the XML looks like:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  
  &lt;monday&gt;
      &lt;employee&gt;
          &lt;name&gt;Employee 1&lt;/name&gt;
          &lt;startTime&gt;12 PM&lt;/startTime&gt;
          &lt;endTime&gt;3:30 PM&lt;/endTime&gt;
          &lt;skills&gt;Web Development, Graphic Design&lt;/skills&gt;
          &lt;programs&gt;Sublime Text&lt;/programs&gt;
      &lt;/employee&gt;
      &lt;employee&gt;
          &lt;name&gt;Employee 2&lt;/name&gt;
          &lt;startTime&gt;10 AM&lt;/startTime&gt;
          &lt;endTime&gt;2 PM&lt;/endTime&gt;
          &lt;skills&gt;Graphic Design&lt;/skills&gt;
          &lt;programs&gt;Illustrator, Photoshop&lt;/programs&gt;
      &lt;/employee&gt;
      &lt;employee&gt;
          &lt;name&gt;Employee 3&lt;/name&gt;
          &lt;startTime&gt;12:30 PM&lt;/startTime&gt;
          &lt;endTime&gt;3:30 PM&lt;/endTime&gt;
          &lt;skills&gt;Social Media&lt;/skills&gt;
          &lt;programs&gt;Facebook, Twitter, Instagram&lt;/programs&gt;
      &lt;/employee&gt;
  &lt;/monday&gt;
  </code></pre>
  
  <p>The algorithm I'm aiming for is:</p>
  
  <ol>
  <li>Within root element (<code>monday</code>), go into firstChild element (<code>employee</code>)</li>
  <li>Loop through each child element of <code>employee</code> (<code>name</code>, <code>startTime</code>, <code>endTime</code>, <code>skills</code>, <code>programs</code>)</li>
  <li>For each child element, write text to HTML document</li>
  <li>Repeat steps 2 and 3 for each <code>employee</code> element until iteration reaches lastChild element</li>
  </ol>
  
  <p>So far, I am only able to iterate and write <em>only one element</em> of each employee. Here's the code for the <code>name</code> element:</p>
  
  <pre><code>// loads XML file
  if (window.XMLHttpRequest) {
    xhttp = new XMLHttpRequest();
  } else { // for IE 5/6
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xhttp.open("GET","assets/" + today + ".xml",false);
  xhttp.send();
  xmlDoc = xhttp.responseXML;
  document.write("XML document loaded into an XML DOM Object." + "&lt;br&gt;&lt;br&gt;"); // confirms XML file is loaded
  
  
  // iterates through employees and displays their information
  x = xmlDoc.getElementsByTagName("name");
  for (i = 0; i &lt; x.length; i++) {                  // line 1
      document.write(x[i].childNodes[0].nodeValue);
      document.write("&lt;br&gt;");
  }
  </code></pre>
  
  <p>The output:</p>
  
  <pre><code>Employee 1
  Employee 2
  Employee 3
  </code></pre>
  
  <p>I've tried nesting another for loop within <code>// line 1</code>, however that results in nothing displayed in the output.</p>
  
  <p>My goal for the correct output is:</p>
  
  <pre><code>Employee 1
  Start Time: 12 PM
  End Time: 3:30 PM
  Skills: Web Development, Graphic Design
  Programs: Sublime Text, Dreamweaver
  
  Employee 2
  Start Time: 11 AM
  End Time: 32 PM
  Skills: Graphic Design
  Programs: Illustrator, Photoshop
  
  Employee 3
  Start Time: 12:30 PM
  End Time: 3:30 PM
  Skills: Social Media
  Programs: Facebook, Twitter, Instagram
  </code></pre>
  
  <p>If you have any questions, I'll answer them the best I can!</p>
  
  <p>Thank you ahead of hand!</p>