Отображение XML в HTML Div
Я хотел бы отобразить древовидную структуру XML, как она есть на HTML-странице.
XML:
<employees>
<employee id="1">
<firstName>OneFirstName</firstName>
<lastname>OneSecondName</lastname>
</employee>
<employee id="2">
<firstname>TwoFirstName</firstname>
<lastname>TwoSecondName</lastname>
</employee>
</employees>
Строковая версия XML поступает из службы WCF и визуализируется с помощью угловой привязки, как показано ниже.
Несколько вещей, которые я пробовал, не сработали для меня. Может быть, я что-то упускаю и ищу недостающее звено.
http://tiku.io/questions/2496035/how-to-display-xml-data-in-div[^]
http://www.experts-exchange.com/Programming/Languages/.NET/ASP.NET/Q_23513630.html[^]
http://stackoverflow.com/questions/10498188/how-to-display-xml-data-in-div[^]
Приведенные выше ссылки предлагают два подхода к отображению XML:
1-преобразование HTML с использованием htmlEntities (...), которое заменяет такие символы, как <, > на их HTML-версию. Попробовал это сделать, и он показывает XML, однако отступ и интервал теряются. Все приходит в строку и не форматируется как XML.
2. Преобразование HTML, используя библиотеку vkbeautify.js . Попробовал это сделать, и это дает правильное форматирование в диалоговом окне оповещения. Однако на главной странице непрерывно отображаются только значения XML-тегов. Здесь отступ теряется.
Пожалуйста, найдите ниже код. Я использовал простой блокнот, чтобы создать его.
Примечание: скачать vkbeautify.0.99.00.beta.js от
https://code.google.com/p/vkbeautify/downloads/list[^]
Код: index.html
<html>
<title>
<h1> HTML Javascript page </h1>
</title>
<head>
<script type="text/javascript" src="vkbeautify.0.99.00.beta.js"></script>
</head>
<body>
<h1>Employees</h1>
<button type="button" onclick="displayXml()">Display Employee xml.</button>
<hr/>
<p id="empDetails"></p>
<script>
var xmlString = "<employees>";
xmlString = xmlString +" <employee id='1'>";
xmlString = xmlString +" <firstName>OneFirstName</firstName>";
xmlString = xmlString +" <lastname>OneSecondName</lastname>";
xmlString = xmlString +" </employee>";
xmlString = xmlString +" <employee id='2'>";
xmlString = xmlString +" <firstname>TwoFirstName</firstname>";
xmlString = xmlString +" <lastname>TwoSecondName</lastname>";
xmlString = xmlString +" </employee>";
xmlString = xmlString +"</employees>";
function displayXml() {
document.getElementById('empDetails').innerHTML = xmlString;
};
function htmlEntities(str) {
var htmlString = String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
return htmlString;
}
function displayXml() {
// Normal display of xml
document.getElementById('empDetails').innerHTML = xmlString;
alert("Normal display: \n" + xmlString);
// HTML conversion only
var htmlString = htmlEntities(xmlString);
document.getElementById('empDetails').innerHTML = htmlString;
alert("HTML formatted display: \n" + htmlString);
// Using vkbeautify
var beautifyHtmlString = vkbeautify.xml(xmlString);
document.getElementById('empDetails').innerHTML = beautifyHtmlString;
alert("VKbeautify display: \n" + beautifyHtmlString);
};
</script>
</body>
</html>
Заранее спасибо!!!
Sergey Alexandrovich Kryukov
"Не сработало" - это не информативно. Непонятно, как именно вы хотите его отобразить, но я не вижу никаких проблем.
Что вы пробовали так далеко?
—СА
Praveen Raghuvanshi
Обновлен вопрос!!!
Sergey Alexandrovich Kryukov
Означает ли это, что вам просто нужно было отобразить XML-текст? И текст жестко закодирован?
И в чем проблема?
—СА
Praveen Raghuvanshi
Да, мне нужно отобразить XML-текст таким, какой он есть, и он приходит в виде строки из веб-службы. Просто для представления я жестко закодировал его.
Однако, с использованием <пред Ланг="в формате XML"&ГТ;&ЛТ;/пре&ГТ; работал для меня.
Sergey Alexandrovich Kryukov
Спасибо за разъяснение. Все в порядке. Просто бежать разметки HTML (использовать &амп;ГТ; для >, и так далее) и использовать в <предварительно&ГТ;.
—СА
Mohibur Rashid
Вы разместили кучу ссылок со словами "не сработало". Может быть, вы должны показать нам свою работу, а не работу других людей, которая не сработала
Praveen Raghuvanshi
Обновлен вопрос!!!
Praveen Raghuvanshi
[Код удален — SA]