Read local XML files to parse

Question

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:

score 2 · Accepted Answer · edited Mar 09 '19 at 06:06

2

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>

edited Mar 09 '19 at 06:06

Bhargav Rao

50,140
28
121
140

answered Jan 10 '19 at 08:14

O.O

1,389
14
29

Thanks for the answer Olayinka! After reading your answer I tried to setup a localhost and it worked, just as you said. However, would it be possible to load a local file when I'm in the web? I am guessing this might not be possible due to security reasons. I was thinking of doing the parsing from an extension, if possible. We would need to download some xml files and then parse them to find some information, so it would be easiest for us to access them from our local drive. – Joe Berg Jan 10 '19 at 09:54
1

@JoeBerg You can have a look at `file:///` https://stackoverflow.com/a/18246357/7626277 but this will only work if the webpage is run on your pc where the file is available or at the same location on someonelse's, also look up `OData` https://stackoverflow.com/a/3396978/7626277 which is more flexible and allows changes to the xml data and can be queried from anywhere. Hope it helps :) – O.O Jan 10 '19 at 10:11
Thanks! I will look into that and see if I can sort it out. :) I have run into another issue, perhaps you could have a quick look at it and see if you can understand how to solve it. I am having issues accessing the "SUBCATEGORY", all others can be accessed through the method used above except for that one. Do you know what the issue is? It looks to have an extra space in front of it. I put it as a comment in the html part of the jsfiddle: http://jsfiddle.net/5dfhz40j/4/ – Joe Berg Jan 10 '19 at 10:47
@JoeBerg if you mean not accessible as in not showing up in DOM, see updated answer, run snippet and have a look at updated file https://raw.githubusercontent.com/olayenca/externals/master/XMLParse.xml. – O.O Jan 10 '19 at 10:55
Thanks for trying to help me further Olayinka. I the issue I am having seems to be because not all ITEM contains SUBCATEGORY. So it might be failing because of that? When I tested it seems to work, if I add SC to all of the ITEMS it will work, but if some is missing it fails. I suppose I need something to verify if ITEM does not contain SC that it will leave td blank in the table, or skip it. – Joe Berg Jan 10 '19 at 13:44
1

@JoeBerg add a condition to look for missing nodes. See update. – O.O Jan 10 '19 at 15:33

Read local XML files to parse

1 Answers1