如何将数据从 XML 文件导入 HTML 表格

Question

I got an XML file which looks like this. I want to make an HTML table that will contain this data in order. Any idea how? I have very little knowledge with javascript. Now when I click on the button:

I get an error:

javascript.js:16 Uncaught TypeError: Cannot read property 'getElementsByTagName' of null

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xhttp.open("GET", "examData.xml", true);
  http.send();
}
function myFunction(xml){
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Date</th><th>Type of exam</th><th>Course</th><th>Semester</th><th>Students</th><th>From of exam</th><th>Room</th></tr>";
  var x = xmlDoc.getElementsByTagName("exam");
  for (i = 0; i <x.length; i++) { 
    table += "<tr><td>" +
    x[i].getElementsByTagName("date")[0].childNodes[0].nodeValue + "</td><td>" +
    x[i].getElementsByTagName("type")[0].childNodes[0].nodeValue + "</td></tr>";
    x[i].getElementsByTagName("course")[0].childNodes[0].nodeValue + "</td></tr>";
    x[i].getElementsByTagName("semester")[0].childNodes[0].nodeValue + "</td></tr>";
    x[i].getElementsByTagName("students")[0].childNodes[0].nodeValue + "</td></tr>";
    x[i].getElementsByTagName("form")[0].childNodes[0].nodeValue + "</td></tr>";
    x[i].getElementsByTagName("room")[0].childNodes[0].nodeValue + "</td></tr>";
  }
  document.getElementById("demo").innerHTML = table;
}

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<exams>
  <exam>
    <date>2020-01-15</date><type>Written</type><course>SJD-1Z</course><semester>1</semester><students>0</students><form>Ordinary</form><room>DSADSADSA</room>
  </exam>
  <exam>
    <date>2020-01-15</date><type>Written</type><course>SJD-1Z</course><semester>1</semester><students>0</students><form>Ordinary</form><room>DSADSADSA</room>
  </exam>
  <exam>
    <date>2020-01-15</date><type>Written</type><course>SJD-1Z</course><semester>1</semester><students>0</students><form>Ordinary</form><room>DSADSADSA</room>
  </exam>
  <exam>
    <date>2020-01-15</date><type>Written</type><course>SJD-1Z</course><semester>1</semester><students>0</students><form>Ordinary</form><room>DSADSADSA</room>
  </exam>
  <exam>
    <date>2020-01-15</date><type>Written</type><course>SJD-1Z</course><semester>1</semester><students>0</students><form>Ordinary</form><room>DSADSADSA</room>
  </exam>
  <exam>
    <date>2020-01-15</date><type>Written</type><course>SJD-1Z</course><semester>1</semester><students>0</students><form>Ordinary</form><room>DSADSADSA</room>
  </exam>
  <exam>
    <date>2020-01-15</date><type>Written</type><course>SJD-1Z</course><semester>1</semester><students>0</students><form>Ordinary</form><room>DSADSADSA</room>
  </exam>
  <exam>
    <date>2020-01-15</date><type>Written</type><course>SJD-1Z</course><semester>1</semester><students>0</students><form>Ordinary</form><room>DSADSADSA</room>
  </exam>
</exams>

<h1>Our first project</h1>
<button type="button" onclick="loadDoc()">Get Table</button>
<br><br>
<table id="demo"></table> 

Answer 1

you have to use AJAX:

something like that:

const myTable   = document.getElementById('demo')
    , myXMLfile = 'examData.xml';
var xmlhttp     = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
  if (4 === this.readyState) {  /* DONE */
    if (200 === this.status) {  /* LOADING */
      fctGetXML(this);
    }
    else {
      console.warn("error %d on loading file: %s !", this.status, myXMLfile);
    }
  }
};


function loadDoc() {
  xmlhttp.open("GET", myXMLfile, true);
  xmlhttp.send();
}

function fctGetXML(xml) {
  let xmlDoc = xml.responseXML;

  xmlDoc.querySelectorAll('exam').forEach(exam => {
    let nRow = myTable.insertRow(-1) , rCell  = 0;

    nRow.insertCell(rCell++).textContent = exam.querySelector('date').textContent;
    nRow.insertCell(rCell++).textContent = exam.querySelector('type').textContent;
    nRow.insertCell(rCell++).textContent = exam.querySelector('course').textContent;
    nRow.insertCell(rCell++).textContent = exam.querySelector('semester').textContent;
    nRow.insertCell(rCell++).textContent = exam.querySelector('students').textContent;
    nRow.insertCell(rCell++).textContent = exam.querySelector('form').textContent;
    nRow.insertCell(rCell++).textContent = exam.querySelector('room').textContent;
  });
}