title: Using JavaScript to Create an XML table correctly
body: <p>I'm using an HTML file with JavaScript to parse an XML document and put all its data into a table. The XML file looks like this:</p>
  <pre><code>&lt;?xml version=&quot;1.0&quot;?&gt; 
  &lt;orders&gt; 
  &lt;order&gt; 
      &lt;customerid&gt;2384&lt;/customerid&gt; 
      &lt;status&gt;pending&lt;/status&gt; 
      &lt;item instock=&quot;Y&quot; itemid=&quot;SD93&quot;&gt; 
          &lt;name&gt;Flying By Roller Skates&lt;/name&gt; 
          &lt;price&gt;25.00&lt;/price&gt; 
          &lt;qty&gt;25&lt;/qty&gt; 
      &lt;/item&gt; 
      &lt;item instock=&quot;N&quot; itemid=&quot;B12&quot;&gt; 
          &lt;name&gt;Bounce-o Ball&lt;/name&gt; 
          &lt;price&gt;.35&lt;/price&gt; 
          &lt;qty&gt;150&lt;/qty&gt; 
      &lt;/item&gt; 
  &lt;/order&gt; 
  &lt;order&gt; 
      &lt;customerid&gt;5268&lt;/customerid&gt; 
      &lt;status&gt;complete&lt;/status&gt; 
      &lt;item instock=&quot;Y&quot; itemid=&quot;Q52&quot;&gt; 
          &lt;name&gt;Crash N Burn Skis&lt;/name&gt; 
          &lt;price&gt;20&lt;/price&gt; 
          &lt;qty&gt;10&lt;/qty&gt; 
      &lt;/item&gt; 
  &lt;/order&gt; 
  &lt;order&gt; 
      &lt;customerid&gt;3384&lt;/customerid&gt; 
      &lt;status&gt;pending&lt;/status&gt; 
      &lt;item instock=&quot;Y&quot; itemid=&quot;PS93&quot;&gt; 
          &lt;name&gt;All Star Shoe&lt;/name&gt; 
          &lt;price&gt;55.00&lt;/price&gt; 
          &lt;qty&gt;12&lt;/qty&gt; 
      &lt;/item&gt; 
      &lt;item instock=&quot;Y&quot; itemid=&quot;M12&quot;&gt; 
          &lt;name&gt;All Star Hat&lt;/name&gt; 
          &lt;price&gt;44.35&lt;/price&gt; 
          &lt;qty&gt;15&lt;/qty&gt; 
      &lt;/item&gt; 
  &lt;/order&gt; 
  &lt;order&gt; 
      &lt;customerid&gt;9008&lt;/customerid&gt; 
      &lt;status&gt;pending&lt;/status&gt; 
      &lt;item instock=&quot;N&quot; itemid=&quot;F32&quot;&gt; 
          &lt;name&gt;Fancy Shirt&lt;/name&gt; 
          &lt;price&gt;120&lt;/price&gt; 
          &lt;qty&gt;100&lt;/qty&gt; 
      &lt;/item&gt; 
  &lt;/order&gt; 
  &lt;/orders&gt; 
  </code></pre>
  <p>This is the JavaScript code in my HTML file:</p>
  <pre><code>        var output = &quot;&quot;;
          var CustomerID = xmlDoc.getElementsByTagName(&quot;customerid&quot;);
          var Status = xmlDoc.getElementsByTagName(&quot;status&quot;);
          var Item = xmlDoc.getElementsByTagName(&quot;item&quot;);
          var Order = xmlDoc.getElementsByTagName(&quot;order&quot;);
          
          output += &quot;&lt;table border='1'&gt;&quot;;
          output += &quot;&lt;tr&gt;&quot; + 
                      &quot;&lt;th&gt;Customer ID&lt;/th&gt;&quot; +
                      &quot;&lt;th&gt;Status&lt;/th&gt;&quot; +
                      &quot;&lt;th&gt;Item Name&lt;/th&gt;&quot; +
                      &quot;&lt;th&gt;Price&lt;/th&gt;&quot; +
                      &quot;&lt;th&gt;Quantity&lt;/th&gt;&quot; +
                  &quot;&lt;/tr&gt;&quot;;
  
          for(i=0; i&lt;CustomerID.length; i++) {
  
            if(Status[i].innerHTML == &quot;pending&quot;) {
  
                output += &quot;&lt;tr&gt;&quot;;
                output += &quot;&lt;td rowspan='2'&gt;&quot; + CustomerID[i].innerHTML + &quot;&lt;/td&gt;&quot;;
                output += &quot;&lt;td rowspan='2'&gt;&quot; + Status[i].innerHTML + &quot;&lt;/td&gt;&quot;;
  
                for(i2=0; i2&lt;Order[i].children.length; i2++) {
  
                  if (Order[i].children[i2].nodeName == &quot;item&quot;) {
  
                    for(i3=0; i3&lt;Item[i2].children.length; i3++) {
                        output += &quot;&lt;td&gt;&quot; + Item[i2].children[i3].innerHTML + &quot;&lt;/td&gt;&quot;;
                    } 
                    output += &quot;&lt;/tr&gt;&quot;;
                    output += &quot;&lt;tr&gt;&quot;;
                    
                    } else {
                      output += &quot;&quot;;
                    }
                }
            } else {
              output += &quot;&quot;;
            }
          }             
                output += &quot;&lt;/table&gt;&quot;;
                document.getElementById(&quot;table&quot;).innerHTML = output;
  </code></pre>
  <p>But I keep getting this table: <a href="https://i.stack.imgur.com/STQi7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/STQi7.png" alt="My Table" /></a></p>
  <p>it only selects those two items and I am unsure why. How can I change my code so that the table can be displayed properly?</p>