parse xml with sub childnodes

Question

Good morning.

I have the next xml file with sub childs, and I want to read them for populate the data into a table. Right now, I know how to do it in a simple way, with childnodes, but I really dont know how to achieve it for getting the sub childnodes.

<Result>
<Record id="000231">
<AC_NPD/>
<Name>Company1</Name>
<AC_CPR>00003</AC_CPR>
<AC_ALM>00</AC_ALM>
<AC_FEC>12/01/2007</AC_FEC>
<AC_LNA ncols="6">
   <Row>
      <Column>000084</Column>
      <Column>1.230</Column>
      <Column/>
      <Column/>
      <Column/>
      <Column/>
   </Row>
</AC_LNA>
<AC_FSE>12/01/2007</AC_FSE>
<AC_AV/>
<AC_UFH ncols="3"/>
</Record>
</Result>

Now, I paint the table with the results, using this script:

 <script>
 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","xml/pruebas/resp2.asp",false);
 xmlhttp.send();
 xmlDoc=xmlhttp.responseXML; 


 document.write("<table class='table table-striped table-condensed table-bordered'  id='example'>");
document.write("<thead>");
    document.write("<tr class='odd gradeX'>");
  document.write("<th>Sale</th>");
    document.write("<th>Name</th>");
    document.write("<th>Date</th>");
    document.write("<th>Date Sale</th>");
    document.write("<th>Item</th>");
    document.write("<th>Quantity</th>");
    document.write("<th class='hidden-phone'>Price</th>");
    document.write("<th class='hidden-phone'>Total</th>");
    document.write("<th>Sale Item</th>");
    document.write("<th>Button</th>");
   document.write("</tr>");
   document.write(" </thead>");
var x=xmlDoc.getElementsByTagName("Record");

for (i=0;i<x.length;i++)
 { 


 document.write("<tr>");
 document.write("<td>");  document.write("</td>");
 document.write("<td>");  document.write(x[i].getElementsByTagName("Name")[0].childNodes[0].nodeValue);  document.write("</td>");
 document.write("<td>");  document.write(x[i].getElementsByTagName("AC_FEC")[0].childNodes[0].nodeValue);  document.write("</td>");
 document.write("<td>");  document.write(x[i].getElementsByTagName("AC_FSE")[0].childNodes[0].nodeValue);  document.write("</td>");
 document.write("<td>"); document.write(x[i].getElementsByTagName("AC_LNA")[0].childNodes[0].nodeValue);   document.write("</td>");
 document.write("<td>");   document.write("</td>");
 document.write("<td>");   document.write("</td>");
 document.write("<td>");   document.write("</td>");
 document.write("<td>");  document.write("</td>");


document.write("<td> <a data-toggle='modal' class='btn' href='sale.asp?&number=");     document.write(x[i].getElementsByTagName("AC_FEC")[0].childNodes[0].nodeValue);    document.write("' data-target='#myModal'>  My Sale  </a> ");                document.write("   </td>");

 document.write("</tr>");
 }
document.write("</table>");
</script>

So, if anyone knows how to get the sub child node i would be very gratefully.

Best regards.

Answer 1

First of all, please note your XML is invalid:

1. Some <Column> tags are ended with <Columna>.
2. <AC_LNA> tag is not properly closed.

After you fix this, I would recommend, it this is an option in your case, separating XML from your presentation by using XSLT sheet. Note that using XSLT is not an only option here, it's only my recommendation.

If you do not want to use XSLT, you can always get to the sub-childnodes using on example:

var columns = x[i].getElementsByTagName('Column');
for ( var ci = 0; ci < columns.length; ci++ ) {
  // do something with columns[ci]
}

If you do opt for XSLT, there is a good library by Google called AJAXSLT . You can use it to transform XML you're getting from the server to HTML.

Your stylesheet would look like this (partial response):

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
  <table>
    <xsl:for-each select="Result/Record">
    <tr>
      <td><xsl:value-of select="Name"/></td>
      <td><xsl:value-of select="AC_CPR"/></td>
      <td>
        Columns: 
        <xsl:for-each select="AC_LNA/Row/Column[text() != '']">
          <xsl:value-of select="." />, 
        </xsl:for-each>
      </td>
    </tr>
    </xsl:for-each>
  </table>
</xsl:template>
</xsl:stylesheet>

Code above creates come table (with no <thead> for simplicity) and gets <Record> name, AC_CPR and each of Row/Column values. You can easily expand it to retrieve more information.