JSON error. My code can not read JSON

Question

JSON error. My code can not read JSON

Navigation

#1 by (2 votes)

1

I should create a page that shows a catalog of albums provided in xml. From there I have to transform the catalog.xml into JSON and show it in a table with artist and with Title. The problem is that my code does not read the document because it says there are invalid tags.

Error provided in Google Chrome: VM40: 1 Uncaught SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse () at myFunction (Test.html: 29) at XMLHttpRequest.xhttp.onreadystatechange (Test.html: 15) myFunction @ Teste.html: 29 xhttp.onreadystatechange @ Test.html: 15 XMLHttpRequest.send (async) loadDoc @ Test.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>

javascript json xmlhttprequest

asked by anonymous 01.11.2018 / 22:47

1 answer

How to use jquery after () in javascript? Verify if dynamic table is with data

score 2 · Accepted Answer

You can not use JSON.parse to convert an XML string to JSON.

Since you are receiving an XML response, change the responseText to responseXML so that the return is already parsed in XML format, otherwise it will come as a string.

Then just go through all the ALBUM tags and get the text of the tag you want and go concatenating the table variable. When doing innerHTML you have to close the table with </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>";
}

The end result will look something like: