Возникли проблемы при загрузке HTML таблицы из XML документа - PullRequest
Новая
       5

Возникли проблемы при загрузке HTML таблицы из XML документа

0 голосов
/ 21 апреля 2020

У меня проблемы с загрузкой значений из файла XML и вставкой их в таблицу HTML. В нем говорится, что тег html, к которому я пытаюсь получить доступ, не определен "script. js: 15 Uncaught TypeError: Невозможно прочитать свойство 'getElementsByTagName' из undefined". Я пытаюсь вставить значения и в таблицу html из загруженного файла XML. 

// script.js

function loadXMLDoc() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            myFunction(this);
        }
    };
    xmlhttp.open("GET", "table.xml", true);
    xmlhttp.send();
}
function myFunction() {
    var xmlDoc = XMLHttpRequest.responseXML;
    var table = '<tr><th>Name</th><th>Age</th></tr>';
    var x = xmlDoc.getElementsByTagName('STUDENT');
    for (i = 0; i < x.length; i++) {
        table += "<tr><td>" +
            x[i].getElementsByTagName("NAME")[0].childNodes[0].nodeValue +
            "</td><td>" +
            x[i].getElementsByTagName("AGE")[0].childNodes[0].nodeValue +
            "</td></tr>";
    }
    document.getElementById("students") = table;
}

//relevant html
<body>
    <br><br>
    <table id="students"></table>
    <script src="script.js"></script>
</body>

//XML Doc Contents
<CLASS ID=”Advanced Web Development”>
    <STUDENT>
            <NAME>Tom</NAME>
            <AGE>19</AGE>
            <HEIGHT>1.3</HEIGHT>
            <SEX>M</SEX>
            <GRADE>B</GRADE>
        </STUDENT>
    <STUDENT>
            <NAME>Dick</NAME>
            <AGE>29</AGE>
            <HEIGHT>1.1</HEIGHT>
            <SEX>M</SEX>
            <GRADE>A</GRADE>
        </STUDENT>
    <STUDENT>
            <NAME>Harry</NAME>
            <AGE>39</AGE>
            <HEIGHT>1.5</HEIGHT>
            <SEX>M</SEX>
            <GRADE>C</GRADE>
        </STUDENT>
    <STUDENT>
            <NAME>Mary</NAME>
            <AGE>30</AGE>
            <HEIGHT>1.1</HEIGHT>
            <SEX>F</SEX>
            <GRADE>B+</GRADE>
        </STUDENT>
</CLASS>

1 Ответ

0 голосов
/ 22 апреля 2020

Кажется, есть несколько вещей, которые вы не совсем делаете прямо здесь:

Во-первых, класс XMLHttpRequest не имеет свойства responseXML: это не то, где можно получить результат асинхронного запроса. Вместо этого свойство responseXML принадлежит отдельным XMLHttpRequest объектам (или «экземплярам»). Вы создаете новый XMLHttpRequest экземпляр в переменной xmlhttp в строке var xmlhttp = new XMLHttpRequest();, и это будет xmlhttp, который содержит свойство responseXML.

Кроме того, вы передаете значение this в вашем обработчике onreadystatechange до myFunction, но myFunction не принимает никаких аргументов. JavaScript имеет очень слабые ограничения на вызов функций с правильным количеством аргументов: любые избыточные аргументы просто игнорируются.

Попробуйте изменить первую пару строк этой функции с 

function myFunction() {
    var xmlDoc = XMLHttpRequest.responseXML;

на 

function myFunction(result) {
    var xmlDoc = result.responseXML;

Это позволяет myFunction получить экземпляр xmlhttp и извлечь из него ответ XML.

Во-вторых, в конце написанной вами функции: 

document.getElementById("students") = table;

Ваша переменная table содержит строку HTML, представляющую содержимое таблицы. Однако вы не можете установить элемент в строку HTML. Вместо этого вы хотите присвоить эту строку HTML внутренней HTML этого элемента, используя свойство innerHTML элемента: 

document.getElementById("students").innerHTML = table;

Наконец, документ XML Вы включаете в свой вопрос неправильную форму, поскольку атрибут ID элемента root использует умные кавычки (”) для окружения значения, когда вместо него следует использовать нейтральные кавычки ("). Если XML не правильно сформирован, свойство responseXML result будет null.

Я внес эти изменения в ваш код, и это сработало, так как я мог загрузить XML и заполнить таблицу данными из файла XML.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...