JSON error. My code cannot read JSON

Question

JSON error. My code cannot read JSON

Asked 5 years, 8 months ago

Viewed 203 times

1

I should create a page that shows a catalog of albums provided in xml. Then I have to transform the catalog.xml into JSON and show it in a table with artist and title. The problem is that my code does not read the document because it says that 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 @ Test.html:29 xhttp.onreadystatechange @ Test.html:15 Xmlhttprequest.send (async) loadDoc @Test.html:19 onclick @Test.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>

1 answer

Browser other questions tagged javascript json xmlhttprequest

You are not signed in. Login or sign up in order to post.

by Sam • **79,597** points · Answer 1 · 2018-11-01T22:33:58+00:00

There’s no way to use JSON.parse to convert an XML string to JSON.

As you are receiving an XML response, exchange the responseText for responseXML so that the return is already parsed in XML format, otherwise it will come as string.

Then just go through all the tags ALBUM and take the text of the tag you want and go concatenating into the variable table. When you do the 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 be something like: