Цикл по узлам XML с использованием JavaScript и вывод таблицы HTML

1

Я создаю веб-страницу с использованием JavaScript для создания таблицы с отдельной строкой для каждого узла, который находится в файле XML (примечание: я не могу изменить XML файл с использованием XSL/XSLT по разным причинам).

    <script>
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        var xmlhttp = new XMLHttpRequest();
        } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.open("GET", "Books.xml", false);
        xmlhttp.send();
        xmlDoc = xmlhttp.responseXML;
    document.write("<table id=name border='1'>");
    document.write("<tr><th>Book Name</th><th>Book Price</th><th>Book Author</th><th>Book Comments</th></tr>");  document.write("<tr>");

Моя проблема заключается в том, что XML файл имеет другой набор childNodes в зависимости от содержимого, доступного для любой конкретной книги, например -

    <Book>
    <BookName>Cooking Today</BookName>
    <BookPrice>$6.99</BookPrice>
    </Book>

    <Book>
    <BookName>How To Make It</BookName>
    <BookPrice>$7.99</BookPrice>
    <BookAuthor>Gary Shaw</BookAuthor>
    <BookComments>OMG, it changed my life</BookComments>
    </Book> 

Созданная таблица имеет все имена столбцов, необходимые для каждого поля, однако, поскольку для каждой книги есть разные дочерние ноды, размещение этих значений в каждой строке не соответствует соответствующему столбцу.

Есть ли способ, чтобы этот скрипт вводил пустое/пустое/нулевое значение, когда конкретное поле недоступно (т.е. В приведенном выше примере мне нужно пустое место в моей таблице для книги "Кулинария сегодня", для недостающих полей - Автор книги, Комментарии к книге)?

Теги:

1 ответ

0

Первый шаг: определение области объекта

Если вы знаете каждый отдельный узел, вы можете определить все переменные объекта, верно? Затем сделайте это, прежде чем пытаться сделать XML-ридер. Я предлагаю:

function Book() {
    this.importableVariables = ['bookName', 'bookPrice', 'bookAuthor', 'bookComments'];
}
Book.prototype.toRow = function() {
    var output = '<tr>';
    for (var x in this.importableVariables) {
        var vName = this.importableVariables[x];
        output += '<td>' + this[vName] + '</td>';
    }
    output += '</tr>';
    return output;

}

Итак, теперь у вас есть что-то, что волшебным образом дает вам таблицу HTML Table. Например:

var book = new Book();
yourTableBodyJqueryRefference.append(book.toRow());

Второй шаг: сделайте свой XML-ридер

Это не очень большая сделка. Вы можете лучше узнать здесь. Я приведу только примеры. В моем случае я хочу разделить этот шаг более чем на два шага.

Шаг 2.1: импорт одной строки

Здесь мне все равно, что я читаю в строке. Я буду искать переменные, перечисленные в конструкторе книги, в importableVariables. Итак, если он существует, мы должны импортировать это значение в наш объект.

Book.prototype.instanceFromXML = function(str) {
    var parser, doc;
    if(window.DOMParser) {
        parser = new DOMParser();
        doc = parser.parseFromString(str,"text/xml");
    } else {
        doc = new ActiveXObject("Microsoft.XMLDOM");
        doc.async = false;
        doc.loadXML(str);
    }
    for (var x in this.importableVariables) {
        var vName = this.importableVariables[x];
        var value = doc.getElementsByTagName(vName);
        this[vName] = value.length > 0 ? value[0].childNodes[0].nodeValue : '';
    }
}

Шаг 2.2: полный импорт

Теперь мы сделаем последнюю магию. Функция для чтения всего XML и разбиения на экземпляры N книг.

function readXML(str) {
    var parser, doc;
    if(window.DOMParser) {
        parser = new DOMParser();
        doc = parser.parseFromString(str,"text/xml");
    } else {
        doc = new ActiveXObject("Microsoft.XMLDOM");
        doc.async = false;
        doc.loadXML(str);
    }
    var xmlBooks = doc.getElementsByTagName("Book"), books = '';
    for (var i = 0; i < xmlBooks.length; i++) {
        var book = new Book();
        book.instanceFromXML(xmlBooks[i].childNodes[0].nodeValue);
        books += book.toRow();
    }
    return books;
}

И последний звонок:

yourTableBodyJqueryRefference.append(readXML(yourXmlString));
  • 0
    У меня наконец-то появилась возможность попробовать это, хотя пока он еще не работает, я предполагаю, что XML-файл перейдет к последнему вызову, как показано ниже - yourTableBodyJqueryRefference.append (readXML (Books.xml));
  • 0
    Любая идея, если это будет работать с пустыми элементами? У меня также есть пара тегов, таких как следующие в этом XML-файле, который я читаю, «</ BookType>» (это эквивалент <BookType> </ BookType> в обычном HTML, но в XHTML это кажется распространенным)
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню