Почему я получаю неопределенные значения при попытке прочитать XML-файл?

Question

Я пытаюсь прочитать данные из xml-файла и отобразить их в моем html-файле, но когда я пытаюсь отобразить свои значения, я получаю «неопределенные» значения для всех значений.Я действительно новичок в ajax и xml, так что извините мой код, если он ужасен!Я буду признателен, если кто-то получит действительно краткий ответ.

Вот мой XML-файл:

<gesmes:Envelope xmlns:gesmes="http://www.gesmes.org/xml/2002-08-01" xmlns="http://www.ecb.int/vocabulary/2002-08-01/eurofxref">
    <gesmes:subject>Reference rates</gesmes:subject>
    <gesmes:Sender>
        <gesmes:name>European Central Bank</gesmes:name>
    </gesmes:Sender>
    <Cube>
        <Cube time="2019-01-25">
            <Cube currency="USD" rate="1.1346"/>
            <Cube currency="JPY" rate="124.72"/>
            <Cube currency="BGN" rate="1.9558"/>
            <Cube currency="CZK" rate="25.697"/>
            <Cube currency="DKK" rate="7.4664"/>
            <Cube currency="GBP" rate="0.86580"/>
                          ....

Мой код JavaScript:

function loadDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            returndata(this);
        }
    };
    xhttp.open("GET", "rates.xml", true);
    xhttp.send();
}

function returndata(xml) {
    var i;
    var xmlDoc = xml.responseXML;
    var table="<tr><th>currency</th><th>rates</th></tr>";
    var x = xmlDoc.getElementsByTagName("Cube");
    for (i = 0; i <x.length; i++) {
        table += "<tr><td>" +
            x[i].getElementsByTagName("currency")[0] +
            "</td><td>" +
            x[i].getElementsByTagName("rate")[0] +
            "</td></tr>";
    }
    document.getElementById("demo").innerHTML = table;
}

Когда я нажимаю кнопку, яполучил следующий результат:

currency    rates
undefined   undefined
undefined   undefined
undefined   undefined
undefined   undefined    
.....

ОБНОВЛЕНИЕ Код JavaScript (исправлено):

function returndata(xml) {
    var i;
    var xmlDoc = xml.responseXML;
    var table="<tr><th>currency</th><th>rates</th></tr>";
    var x = xmlDoc.getElementsByTagName("Cube");
    for (i = 2; i <x.length; i++) {

          table += "<tr><td>" +
              x[i].getAttribute("currency") +
              "</td><td>" +
              x[i].getAttribute("rate") +
              "</td></tr>";

    }
    document.getElementById("demo").innerHTML = table;
}

Хорошо, теперь это работает, большое спасибо, я начал свою переменную со значения 2, потому что когдая пытаюсь создать цикл while (x! = null), моя веб-страница все еще загружается, а затем ломается ..

я пробовал этот:

function returndata(xml) {
    var i;
    var xmlDoc = xml.responseXML;
    var table="<tr><th>currency</th><th>rates</th></tr>";
    var x = xmlDoc.getElementsByTagName("Cube");
    for (i = 0; i <x.length; i++) {
        while (x!=null) {
          table += "<tr><td>" +
              x[i].getAttribute("currency") +
              "</td><td>" +
              x[i].getAttribute("rate") +
              "</td></tr>";
        }
    }
    document.getElementById("demo").innerHTML = table;
}