0

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.

Fran Rod
  • 586
  • 4
  • 14
  • 26

1 Answers1

0

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.

kamituel
  • 34,606
  • 6
  • 81
  • 98
  • Hello, I'm working with the xlst code you submitted and it is working good! – Fran Rod Mar 05 '13 at 13:17
  • Do you know hoy can I load the external xml with ajaxslt? – Fran Rod Mar 05 '13 at 16:03
  • You can find example in [ajaxslt-0.8.1.tar.gz](https://code.google.com/p/ajaxslt/downloads/detail?name=ajaxslt-0.8.1.tar.gz&can=2&q=) in file /test/xslt_script.js. Basically, you need to call xmlParse(string) where 'string' is your XML document. You can use [AJAX](https://developer.mozilla.org/en-US/docs/AJAX) to fetch it. – kamituel Mar 05 '13 at 17:00
  • do you mean this line? var xml = xmlParse(el('xml').value); like this... var xml = xmlParse(myfile.xml); – Fran Rod Mar 05 '13 at 17:24
  • Yes, this line. But you cannot put file path there, it has to be contents of this file. See [MDN documentation](https://developer.mozilla.org/es/docs/XMLHttpRequest/Usar_XMLHttpRequest) too see how to fetch file using AJAX. – kamituel Mar 05 '13 at 17:46
  • hello kamituel, I have been trying and reading but I can't do it. Do you know how can I do it? – Fran Rod Mar 06 '13 at 12:38
  • Sure. Try using $.ajax call from [this answer](http://stackoverflow.com/a/11589473/782609). Just put the path to your XML file as an URL. Then in the callback, 'data' variable will contain your XML. So you can store it or call xmlParse(data). Sorry, I cannot put a code example in an answer, but it's really straightforward. To use $.ajax you'll need to have JQuery. – kamituel Mar 06 '13 at 12:42