Q:

XMLHttpRequest API display in Table that updates

I'm trying to create a table that displays the estimated time of arrival for ships arriving to a port. I'm calling the API:
https://services.marinetraffic.com/api/expectedarrivals/v:3/apikey/portid:DKKAL/protocol:xml/timespan:1

which gives me the response that I want to display in a table in HTML, that updates whenever a new ship is supposedly arriving to the port:
<ETA>
 <VESSEL_ETA MMSI="21840000" ETA="2018-10-03T08:00:00"/>
</ETA>

So far this is what I've got:
<button type="button" onclick="loadDoc()">SHIPS</button>
<table id="ships"></table>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
    myFunction(this);
  }
 };

  xhttp.open("GET","https://services.marinetraffic.com/api/expectedarrivals/v:3/apikey/portid:DKKAL/protocol:xml/timespan:1", true);
  xhttp.send();
 }
 function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>MMSI</th><th>ETA</th></tr>";
  var x = xmlDoc.getElementsByTagName("ETA");
  for (i = 0; i <x.length; i++) {
    table += "<tr><td>" +
    x[i].getElementsByTagName("MMSI")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("ETA")[0].childNodes[0].nodeValue +
    "</td></tr>";
  }
  document.getElementById("ships").innerHTML = table;
}
</script>

However nothing is displayed except for the table headers. How do I make it display the xml response, and make it update whenever a new ship is added to the list?

A:

You're processing the XML incorrectly
The nodes you are looking for are VESSEL_ETA, not ETA
and the MSSI/ETA are attributes of those nodes, not child nodes
so

<button type="button" onclick="loadDoc()">SHIPS</button>
<table id="ships"></table>

<script>
    // this is a dummied up loadDoc - which has no errors in the question
    // this calls myFunction with a dummied up XMLHttpRequest response
    function loadDoc() {
        let rawxml = `<ETA>
 <VESSEL_ETA MMSI="21840000" ETA="2018-10-03T08:00:00"/>
</ETA>`;
        var xmlDoc = new DOMParser().parseFromString(rawxml, 'text/xml');
        myFunction({responseXML: xmlDoc});
    }
    
    function myFunction(xml) {
        var i;
        var xmlDoc = xml.responseXML;
        var table="<tr><th>MMSI</th><th>ETA</th></tr>";
        var x = xmlDoc.getElementsByTagName("VESSEL_ETA");
        for (i = 0; i <x.length; i++) {
            table += '<tr><td>' + 
                x[i].getAttribute('MMSI') + 
                '</td><td>' + 
                x[i].getAttribute('ETA') + 
                '</td></tr>';
        }
        document.getElementById("ships").innerHTML = table;
    }
</script>

