Я создаю веб-страницу с использованием 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>
Созданная таблица имеет все имена столбцов, необходимые для каждого поля, однако, поскольку для каждой книги есть разные дочерние ноды, размещение этих значений в каждой строке не соответствует соответствующему столбцу.
Есть ли способ, чтобы этот скрипт вводил пустое/пустое/нулевое значение, когда конкретное поле недоступно (т.е. В приведенном выше примере мне нужно пустое место в моей таблице для книги "Кулинария сегодня", для недостающих полей - Автор книги, Комментарии к книге)?
Если вы знаете каждый отдельный узел, вы можете определить все переменные объекта, верно? Затем сделайте это, прежде чем пытаться сделать 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());
Это не очень большая сделка. Вы можете лучше узнать здесь. Я приведу только примеры. В моем случае я хочу разделить этот шаг более чем на два шага.
Здесь мне все равно, что я читаю в строке. Я буду искать переменные, перечисленные в конструкторе книги, в 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 : '';
}
}
Теперь мы сделаем последнюю магию. Функция для чтения всего 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));