1

Eu devo criar uma pagina que mostre um catálogo de álbuns fornecidos em xml. Daí tenho que transformar o catálogo.xml em JSON e mostrar ele em uma tabela com artista e com Título. O problema é que meu código não lê o documento pois fala que há tags inválidas.

Erro fornecido no Google Chrome: VM40:1 Uncaught SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse () at myFunction (Teste.html:29) at XMLHttpRequest.xhttp.onreadystatechange (Teste.html:15) myFunction @ Teste.html:29 xhttp.onreadystatechange @ Teste.html:15 XMLHttpRequest.send (async) loadDoc @ Teste.html:19 onclick @ Teste.html:5

<!DOCTYPE html>
<html>
<body>
<h2>XMLHttpRequest</h2>
<button type="button" onclick="loadDoc()">Catálogo</button>
<br><br>
<p id="tabelaId"></p>

</body>
<script>
function loadDoc(){
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
  myFunction(this);
  }
 };
xhttp.open("GET", 
"http://clienteweb2017.000webhostapp.com/fundamentosWeb/paginaCatalogo.php", 
 true);
 xhttp.send();
 }
 function myFunction(response) {
 var i;
 console.log (response.responseText);

 var xmlDoc = response.responseText;  

 var table="<table border=1  style=border-collapse:'collapse'; ><tr> 
 <th>Artist</th><th>Title</th></tr>";

 var x = JSON.parse(xmlDoc); 
   for (i = 0; i <x.length;i++) { 
     table += "<tr><td>" +
     xmlDoc+"</td></tr>";
   }

 document.getElementById("tabelaId").innerHTML = table;
 }
 </script>
 </html>
0

1 Resposta 1

2

Não tem como usar JSON.parse para converter uma string XML em JSON.

Como você está recebendo um XML como resposta, troque o responseText por responseXML para que o retorno já venha parseado em formato XML, caso contrário virá como string.

Depois basta percorrer todas as tags ALBUM e pegar o texto da tag que você deseja e ir concatenando na variável table. Quando for fazer o innerHTML tem que fechar a tabela com </table>:

function loadDoc(){
   var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         myFunction(this);
      }
   };

   xhttp.open("GET", 
   "http://clienteweb2017.000webhostapp.com/fundamentosWeb/paginaCatalogo.php", 
   true);
   xhttp.send();
}

function myFunction(response) {
   var xmlDoc = response.responseXML;
   var table="<table border=1  style=border-collapse:'collapse'; ><tr> <th>Artist</th><th>Title</th></tr>";

   var albuns = xmlDoc.getElementsByTagName("ALBUM");

   for (var i = 0; i <albuns.length;i++) { 
      var art = albuns[i].querySelector("ARTIST").textContent;
      var tit = albuns[i].querySelector("TITLE").textContent;
      table += "<tr><td>"+art+"</td>"
      +"<td>"+tit+"</td></tr>";
   }

   document.getElementById("tabelaId").innerHTML = table+"</table>";
}

O resultado final será algo como:

inserir a descrição da imagem aqui

2
  • Orbigado pela resposta. Fiquei com uma dúvida quanto a um trecho do código. Gostaria de saber o que exatamente esse query selector faz. Ele interpreta as tags<> ? Por exemplo: <catalogo><album><artist> Bob<artist><album><catalogo> Aí ele vai exatamente no texto da tag que eu escolho ou isso é por causa do text content ? Commented 2/11/2018 às 0:51
  • 1
    Opa! É apenas um seletor. Vc pode selecionar a tag que quiser.
    – Sam
    Commented 2/11/2018 às 9:00

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .