Question

From my backend I retrieve a string that contains some xml data. When i display this (now just with @Model.XM)L I see a nice long string that contains the xml data. Is there anyway to format this as a tree structure? Like with a jquery plugin or something? I tried some google, but couldnt find it.

On the page is also other data, it is not only the xml data.

Answer 1

All you need is a recursive loop that will turn child nodes of the XML document into HTML list elements. Try something like this (untested):

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;
}