AJAX and tables with functions

Question

AJAX and tables with functions

Navigation

#1 by (0 votes)

0

Hello friends, I have a problem to make the code that gives me the correct information that I look for my WEB. But I told them: I have an xml file that goes something like this:

<?xml version='1.0' encoding='utf-8' ?>
<?xml-stylesheet type='text/xsl' href='archivo.xsl' ?>

<bodega>
<inventario>
<Descripcion>Comida de tortuga</Descripcion>
<Codigo>0010</Codigo>
<Clasif>11 200</Clasif>
<precio>1200</precio>
</inventario>

<inventario>
<Descripcion>Comida de gato</Descripcion>
<Codigo>0080</Codigo>
<Clasif>12 700</Clasif>
<precio>1200</precio>
</inventario>

<inventario>
<Descripcion>Collar de perro</Descripcion>
<Codigo>0120</Codigo>
<Clasif>14 111</Clasif>
<precio>1200</precio>
</inventario>
</bodega>

Which I call from a predefined button with the following script:

<script>
function loadXMLDoc() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xmlhttp.open("GET", "archivo.xml", true);
  xmlhttp.send();
}
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Descripcion</th><th>Codigo</th>                                            
  <th>Precio</th></tr>";
  var x = xmlDoc.getElementsByTagName("inventario");
  for (i = 0; i <x.length; i++) {
    table += "<tr><td>" +
    x[i].getElementsByTagName("Descripcion")   
[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("Codigo")[0].childNodes[0].nodeValue  
+
    "</td><td>"+
    x[i].getElementsByTagName("precio")[0].childNodes[0].nodeValue  
+
    "</td></tr>";

}
  document.getElementById("tabla1").innerHTML = table;
}
</script>

This gives me inside a table with id "tabla1" all the data of my xml, but since they will realize this file is just an example, in the real one I have hundreds of articles that I am looking for to link with a condition that shows only the articles with certain classification. To create a button with function call for each of the classifications and thus call only certain items and not the entire file.

Try with a while (), in several ways but without success, I look for the "inventory" tags that contain the "Clasif" with the numerical value 14 111 to be shown only ignoring the rest to display. XP

Any ideas? Greetings and a thousand thanks Hold Latinos!

javascript ajax xml dom html-tabla

asked by DiegoMagnum 06.06.2017 в 23:41

source

1 answer

npm init does not allow me to continue How to add 2 Time Selector

score 0 · Answer 1

Normally XSLT is used to transform XML to HTML, you can find an example of how to do it with Javascript in link and then you can use the XSLT program ( archivo.xsl )

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <!-- para el parametero "clasificacion" puedes pasar '' para seleccionaor todas las 
         clasificaciones o una simple clasificacion como '11 200' 
         o una lista de clasificaciones separadas por '|', es decir, por ejemplo '11 200|12 700'
    -->
    <xsl:param name="clasificacion" select="''"/>

    <xsl:output method="html" indent="yes"/>

    <xsl:template match="bodega">
        <table>
            <thead>
                <tr>
                    <th>Descripción</th>
                    <th>Código</th>
                    <th>Precio</th>
                </tr>
            </thead>
            <tbody>
                <xsl:apply-templates select="inventario[$clasificacion = '' or contains(concat('|', $clasificacion, '|'), Clasif)]"/>
            </tbody>
        </table>        
    </xsl:template>

    <xsl:template match="inventario">
        <tr>
            <xsl:apply-templates select="Descripcion | Codigo | precio"/>
        </tr>
    </xsl:template>

    <xsl:template match="inventario/*">
        <td>
            <xsl:value-of select="."/>
        </td>
    </xsl:template>

</xsl:stylesheet>

In your HTML you use Javascript

<script src="https://www.promisejs.org/polyfills/promise-7.0.4.min.js"></script>

and

  function transform(xmlUrl, xslUrl, xsltParams, targetElement) {
    Promise.all([loadDoc(xmlUrl), loadDoc(xslUrl)]).then(function(data) {
      var xmlDoc = data[0];
      var xslDoc = data[1];

      if (typeof XSLTProcessor !== 'undefined') {
        var proc = new XSLTProcessor();
        proc.importStylesheet(xslDoc);

        for (var prop in xsltParams) {
          proc.setParameter(null, prop, xsltParams[prop]);
        }

        var resultFrag = proc.transformToFragment(xmlDoc, targetElement.ownerDocument);

        targetElement.textContent = '';
        targetElement.appendChild(resultFrag);
      }
      else {
          var template = new ActiveXObject('Msxml2.XslTemplate.6.0');
          template.stylesheet = xslDoc;
          var proc = template.createProcessor();

          for (var prop in xsltParams) {
            proc.addParameter(prop, xsltParams[prop]);
          }

          proc.input = xmlDoc;

          proc.transform();

          var resultHTML = proc.output;

          targetElement.innerHTML = resultHTML;
      }
    });
  }

then you can use for example a button

<input type="button" value="clasificación 11 200"
  onclick="transformar('archivo.xml', 'archivo.xsl', { clasificacion : '11 200' }, document.getElementById('resultado'));">

and

<div id="resultado"></div>