0

I am essentially trying to parse the data in an XML file to get back just one property of each item, in this example a CD. I just want to list the titles, but this is on a static web page I am building without a server back end. I have used the tutorial at W3C which works exactly how I want (though I would rather drop the XML data into a text area, but when I try to run it on a static page just from my desktop it wont work. I have the impression its because no server is running. Can anyone shed some light on this for me? Also if this does have to be hosted, is there another method I could use just with Javascript to accomplish the same goal?

HTML

<!DOCTYPE html>
<html>
<body>
<h2>My CD Collection:</h2>

<button type="button" onclick="loadXMLDoc()">
Get my CD collection</button>

<p id="demo"></p>

<script>
function loadXMLDoc() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xmlhttp.open("GET", "cd_catalog.xml", true); //tried the XML file name with and without full directory
  xmlhttp.send();
}

function myFunction(xml) {
  var x, i, xmlDoc, txt;
  xmlDoc = xml.responseXML;
  txt = "";
  x = xmlDoc.getElementsByTagName("TITLE");
  for (i = 0; i< x.length; i++) {
    txt += x[i].childNodes[0].nodeValue + "<br>";
  }
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

XML

<?xml version="1.0" encoding="UTF-8"?>
<CATALOG>
  <CD>
    <TITLE>Empire Burlesque</TITLE>
    <ARTIST>Bob Dylan</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Columbia</COMPANY>
    <PRICE>10.90</PRICE>
    <YEAR>1985</YEAR>
  </CD>
  <CD>
    <TITLE>Hide your heart</TITLE>
    <ARTIST>Bonnie Tyler</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>CBS Records</COMPANY>
    <PRICE>9.90</PRICE>
    <YEAR>1988</YEAR>
  </CD>
  <CD>
    <TITLE>Greatest Hits</TITLE>
    <ARTIST>Dolly Parton</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>RCA</COMPANY>
    <PRICE>9.90</PRICE>
    <YEAR>1982</YEAR>
  </CD>
</CATALOG>
PHaeLiX
  • 85
  • 1
  • 12
  • XHR is all about making an HTTP request from a client to a server. If there's no server involved, it doesn't make sense. – Pointy Jul 13 '18 at 12:24
  • 1
    Well you really should just run a local server and not have to deal with file protocol issues. https://stackoverflow.com/questions/4819060/allow-google-chrome-to-use-xmlhttprequest-to-load-a-url-from-a-local-file – epascarello Jul 13 '18 at 12:25
  • "I have used the tutorial at W3C" — You're code looks like it came from W3Schools. Do not confuse W3Schools (shoddy tutorial / reference site) with the W3C (standards organisation). – Quentin Jul 13 '18 at 12:25
  • You have several options here: Run a local server to try out XMLHttpRequests or get a real node express server running. There are plenty of tutorials for this. If you just want to map over an array, you can do this in plain JS with no server. – Mario Jul 13 '18 at 12:28
  • Thanks Mario, think that's what I'm going to have to do here. Thanks for closing this out Quentin and just showing your disdain for a site rather than also pointing in the right direction. Nothing like being less than helpful. – PHaeLiX Jul 13 '18 at 12:38

0 Answers0