Fetching XML Data with JavaScript

Question

I feel like I'm going to pull my hair out. I am trying to take some data from an xml file and put it into a table using javascript. I have looked at and followed about a million examples, but for some reason, I can't get it to work. I've been using DreamWeaver, Notepad++ and Brackets. This is my html file.

    <head>
//<meta http-equiv="Content-Type" content="text/html; charset-UTF-8"/>
<script language="javascript" type="text/javascript" src="script2.js"></script>

<title>Computer Science Faculty Information</title>

<h1>Computer Science Faculty Information</h1>

<button onclick="readXML()">Read XML File</button>

<table id="first" border="1">
    <tr>
        <th>Name</th>
    </tr>
</table>

my xml file

<?xml version="1.0?>
<department>
<employee>
    <name>Ajay Katangur, Ph.D.</name>
    <title>Program Coordinator</title>`
    <office>CI 340</office>
    <phone>361-825-2478</phone>        
    <email>[email protected]</email>
</employee>
</department>

and my js file

function readXML() {
"use strict";
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
        myFunction(xmlhttp);
    }
};
xmlhttp.open("GET", "xml.xml", true);
xmlhttp.send();

}

function myFunction(xml) {
"use strict";
var x, i, xmlDoc, table;
xmlDoc = xml.responseXML;
table = "<tr><th>Name</th><th>Title</th><th>Office</th><th>Phone</th><th>Email</th><tr>";
x = xmlDoc.getElementsByTagName("employee");
for(i = 0; i < x.length; i++) {
    table += "<tr><td>" + x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("office")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("phone")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("email")[0].childNodes[0].nodeValue + "</td></tr>";
}
document.getElementById("first").innerHTML = table;

}

I should mention that a large part of the js code here is from W3Schools. Please someone show me what I'm doing wrong. Thanks in advance.

No mention of what is or isn't working or if any errors are thrown in browser dev tools console. — charlietfl
– charlietfl, Commented Feb 28, 2016 at 19:11
Ok so the point is that when the button is clicked, the js should be called and it should populate a table with the data from the xml file. When I click the button, nothing happens. — jynx678
– jynx678, Commented Feb 28, 2016 at 19:31
"nothing happens" ... something does... does event callback trigger? Have you opened browser dev tools and inspected request in network tab? Any errors in console? need to at least do some basic troubleshooting — charlietfl
– charlietfl, Commented Feb 28, 2016 at 19:35
good learning experience...when in doubt dig into the console. Once you resolve that problem use it to monitor errors thrown in script also as well as use it to log variables to the console to see values — charlietfl
– charlietfl, Commented Feb 28, 2016 at 20:01
"Maybe I should mention that I am a complete beginner at JavaScript. I am using a live preview inside DreamWeaver" — Live preview in Dreamweaver is, frankly, awful. Test your websites in a real web browser (with the Developer Tools open) — Quentin
– Quentin, Commented Feb 28, 2016 at 20:27

Yogi · Accepted Answer · 2016-02-28 20:24:48Z

Your code works as you can see in the snippet I've created below. However, as you noted in a comment, the problem is that your request isn't returning the XML file. Check the URL to make sure that it is correct.

Also make sure that your XML is correct. For example, your XML declaration is missing a quote mark, i.e., should be <?xml version="1.0"?> And make sure there are no spaces in the file before that declaration.

Run the snippet to see it work. You can edit the XML in the text box and click the button to see the changes.

function readXML() {

  "use strict";
  
  
  // simulated request
  var xmlhttp={};
  xmlhttp.responseText = window.data.value; 
  xmlhttp.responseXML = (new DOMParser()).parseFromString(xmlhttp.responseText, 'text/xml')
  myFunction(xmlhttp);


/*  
  var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
          myFunction(xmlhttp);
      }
    };
    xmlhttp.open("GET", "xml.xml", true);
    xmlhttp.send();
  }
*/

}


function myFunction(xml) {
  "use strict";
  var x, i, xmlDoc, table;
  xmlDoc = xml.responseXML;
  table = "<tr><th>Name</th><th>Title</th><th>Office</th><th>Phone</th><th>Email</th><tr>";
  x = xmlDoc.getElementsByTagName("employee");
  for (i = 0; i < x.length; i++) {
    table += "<tr><td>" + x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("office")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("phone")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("email")[0].childNodes[0].nodeValue + "</td></tr>";
  }
  document.getElementById("first").innerHTML = table;

}

textarea {
  width: 90%;
  height: 40em;
  padding: 0.5em;
  border: 1px solid black;
  background-color: aliceblue;
}

table {
  border-collapse: collapse;
}
td {
  border: 1px lightgray solid;
  padding: 2px;
}

<button onclick="readXML()">Read XML File</button>

<table id="first" border="1">
  <tr>
    <th>Name</th>
  </tr>
</table>


<h4>XML:</h4>
<textarea id="data">
<?xml version="1.0" encoding="UTF-8" ?>
    <department>
      <employee>
        <name>John Smith, Ph.D.</name>
        <title>Program Coordinator</title>`
        <office>CI 340</office>
        <phone>000-000-0000</phone>
        <email>[email protected]</email>
      </employee>
    </department>
  </textarea>

Collectives™ on Stack Overflow

Fetching XML Data with JavaScript

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related