0

Quiero mostrar mediante xhttp con javascript el catalago.xml este es el enlace: https://www.w3schools.com/xml/cd_catalog.xml

Lo tengo guardado de la siguiente forma

introducir la descripción de la imagen aquí

Este seria mi codigo html:

<!DOCTYPE html>
<html>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
<body>

<h1>The XMLHttpRequest Object</h1>

<button type="button" onclick="loadDoc()">Get my CD collection</button>
<br><br>
<table id="demo"></table>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xhttp.open("GET", "catalogo.xml", true);
  xhttp.send();
}
function myFunction(xml) {
 
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Artist</th><th>Title</th></tr>";
  var x = xmlDoc.getElementsByTagName("CD");
  for (var i = 0; i <x.length; i++) { 
    table+="<tr><td>";
    tabla+=x.[i].getElementsByTagName("ARTIST")[0].textContent;
    table+="</tr></td>";
    tabla+=x.[i].getElementsByTagName("TITLE")[0].textContent;
  }
  document.getElementById("demo").innerHTML = table;
}
</script>

</body>
</html>

El caso que cuando le doy al boton de mostrar el fichero no me muestra nada.

He probado viendo videos y todo lo tengo igual, no sé muy bien en que estoy fallando

1 respuesta 1

1

Tienes un fallo en un par de lineas:

tabla+=x.[i].getElementsByTagName("ARTIST")[0].textContent;
table+="</tr></td>";
tabla+=x.[i].getElementsByTagName("TITLE")[0].textContent;

En esa primera linea y en la tercera lineas te sobra un punto entre la variable x y los [i] ademas la variable table la has llamado tabla por lo que saltaría otro error.

Estas líneas quedarían así:

table+=x[i].getElementsByTagName("ARTIST")[0].textContent;
table+="</tr></td>";
table+=x[i].getElementsByTagName("TITLE")[0].textContent;

Eso por el lado del código, por el lado de la maquina donde estas usando este codigo creo que si no instalas un servidor web no puedes hacer peticiones http asi a la ligera, es más, para que veas que si que funciona el codigo prueba en la propia web de w3Schools y verás como ya no te da el error que salta ahora al corregir el fallo de código. Este código copialo y pegalo en su web sustituyendo al que usan ellos y verás que funciona bien.

<!DOCTYPE html>
<html>
<style>
    table,
    th,
    td {
        border: 1px solid black;
        border-collapse: collapse;
    }

    th,
    td {
        padding: 5px;
    }
</style>

<body>

    <h1>The XMLHttpRequest Object</h1>

    <button type="button" onclick="loadDoc()">Get my CD collection</button>
    <br><br>
    <table id="demo"></table>

    <script>
        function loadDoc() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    myFunction(this);
                }
            };
            xhttp.open("GET", "cd_catalog.xml", true);
            xhttp.send();
        }
        function myFunction(xml) {

            var xmlDoc = xml.responseXML;
            var table = "<tr><th>Artist</th><th>Title</th></tr>";
            var x = xmlDoc.getElementsByTagName("CD");
            for (var i = 0; i < x.length; i++) {
                table += "<tr><td>";
                table += x[i].getElementsByTagName("ARTIST")[0].textContent;
                table += "</tr></td>";
                table += x[i].getElementsByTagName("TITLE")[0].textContent;
            }
            document.getElementById("demo").innerHTML = table;
        }
    </script>

</body>

</html>

Por cierto, prueba a usar la consola para desarrolladores para ir solucionando problemas de este tipo ya que en la consola vas viendo los fallos que te va arrojando tu web, es un consejo.

Espero haberte ayudado. Saludos.

1
  • Muchas gracias no me habia dado del punto. eres un crack Commented el 13 may. 2020 a las 14:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.