CODEWITHSUNDEEP
javascriptxml-parsingxmlhttprequest
Joe Berg
Joe Berg

Reputation: 381

Read local XML files to parse

I am trying to make an XML parser, but I am having difficulties loading local files.

The issue being that when I try to load from my local drive it will still look for the file on the same domain. And the error I am receiving is this.

Failed to load resource: the server responded with a status of 404 (Not Found) http://fiddle.jshell.net/Users/username/Documents/catalog.xml

HTML/JS: (http://jsfiddle.net/5dfhz40j/)

<!DOCTYPE html>
<html>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
<body>
<button type="button" onclick="loadDoc()">Load</button>
<br><br>
<table id="myTable"></table>
<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      xmlFunction(this);
    }
  };
  xhttp.open("GET", "/Users/username/Documents/catalog.xml", true);
  xhttp.send();
}
function xmlFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Category</th><th>Title</th></tr>";
  var x = xmlDoc.getElementsByTagName("ITEM");
  for (i = 0; i <x.length; i++) { 
    table += "<tr><td>" +
    x[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "</td></tr>";
  }
  document.getElementById("myTable").innerHTML = table;
}
</script>
</body>
</html>

XML file:

<?xml version="1.0" encoding="UTF-8"?>
<CATALOG>
  <ITEM>
    <TITLE>TITLE01</TITLE>
    <CATEGORY>CAT01</CATEGORY>
    <ID>ID01</ID>
  </ITEM>
  <ITEM>
    <TITLE>TITLE02</TITLE>
    <CATEGORY>CAT02</CATEGORY>
    <ID>ID02</ID>
  </ITEM>
  <ITEM>
    <TITLE>TITLE03</TITLE>
    <CATEGORY>CAT03</CATEGORY>
    <ID>ID03</ID>
  </ITEM>
  <ITEM>
    <TITLE>TITLE04</TITLE>
    <CATEGORY>CAT04</CATEGORY>
    <ID>ID04</ID>
  </ITEM>
  <ITEM>
    <TITLE>TITLE05</TITLE>
    <CATEGORY>CAT05</CATEGORY>
    <ID>ID05</ID>
  </ITEM>
</CATALOG>

Expected output:

enter image description here

Upvotes: 1

Views: 8101

Answers (1)

O.O
O.O

Reputation: 1419

The error means you are trying to load the file from JSFiddle but it does not exist on JSFiddle and it has no access to your local files because the origin is not the same look up CORS.

Therefore, your code should run fine on your machine and give the desired output if the file exits at that path.

OR

Loaded as an external public file (am using a file from github here):

Run code Snippet

OR

See working Plunkr

var xmlFile = 'https://raw.githubusercontent.com/olayenca/externals/master/XMLParse.xml';

function loadDoc() {
  var xhttp = new XMLHttpRequest();

  xhttp.open("GET", xmlFile, true);
  xhttp.send();
  xhttp.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
      xmlFunction(this.response);
    }
  };

}

function xmlFunction(xml) {
  var parser = new DOMParser();
  var xmlDoc = parser.parseFromString(xml, "text/xml");
  var table = "<tr><th>Category</th><th>Title</th><th>Subcategory</th></tr>"; //subcategory heading
  var x = xmlDoc.getElementsByTagName("ITEM");
  for (var elem of x) {
    var titles = elem.getElementsByTagName(
      "TITLE")[0].childNodes[0].nodeValue;
    var cats = elem.getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue;
    var subCats = elem.getElementsByTagName("SUBCATEGORY").length === 0 ? "..." : elem.getElementsByTagName("SUBCATEGORY")[0].childNodes[0].nodeValue;

    table += "<tr><td>" + cats + "</td><td>" + titles + "</td><td>" + subCats + "</td></tr>";
  }
  document.getElementById("myTable").innerHTML = table;
}
loadDoc();
table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 5px;
}
<table id="myTable"></table>

Upvotes: 2

Related Questions