Блог

Из моего бэкэнда я извлекаю строку, содержащую некоторые XML-данные. Когда я показываю это (теперь только с помощью @Model.XM), я вижу красивую длинную строку, содержащую XML-данные. Есть ли способ отформатировать это как древовидную структуру? Как с помощью плагина jquery или чего-то еще? Я попробовал поискать в Google, но не смог его найти.

На странице также есть другие данные, это не только данные XML.

Все, что вам нужно, это рекурсивный цикл, который превратит дочерние узлы XML-документа в элементы списка HTML. Попробуйте что-то подобное (непроверенное):

 var html = '<ul><li>'   xml.documentElement.nodeName   '</li>';
var html  = displayTree(xml);
var html  = '</ul>';

function displayTree(xml) {
    var str = '';
    if ($(xml).children().length) {
        str  = '<ul>';
        $(xml).children().each(function() {
            str  = '<li>'   this.nodeName   '</li>';
        });
        str  = '</ul>';
        str  = displayTree(xml.childNodes);
    });
    return str;
}
  

Вы могли бы использовать XSLT.

 <xsl:stylesheet version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:output omit-xml-declaration="yes" indent="yes"/>

    <xsl:template match="node()|@*">
      <xsl:copy>
        <xsl:apply-templates select="node()|@*"/>
      </xsl:copy>
    </xsl:template>
</xsl:stylesheet>
  

Ключ заключается в

 <xsl:output indent="yes"/>
  

Если вы примените вышеуказанное преобразование к вашему XML, он выйдет с правильным отступом.
Более подробная информация:http://www.w3.org/TR/xslt#copying