How to make recursive output?

[Qclanton]

Hello.

I have some data to be displayed recursively. For example, multilevel menu:

var menu = [
    {
        title: "Some",
        link: "http://localhost/1",
        submenu: [
            {
                title: "Foo",
                link: "http://subbaz/17"
            },
            {
                title: "Bar",
                link: "http://subbaz/3"
            },
        ]
    }, 

    {
        title: "Other",
        link: "http://localhost/7",
        submenu: [
            {
                title: "Tra",
                link: "http://subkrya/ggg"
            },
            {
                title: "Bla",
                link: "http://subkrya/ssss",
                submenu: [
                    {
                        title: "We Need To Go Deeper",
                        link: "http://very/long/link"
                    }
                ]
            },
        ]
    }, 
];

In plain javascript I can make output in the following manner:
html:

<nav id="menu"></nav>

js:

function drawMenu(menu) {
    var html = '<ul>';

    menu.forEach(function(element) {
        html += '<li><a href="'+element.link+'">'+element.title+'</a></li>';

        if (typeof element.submenu === "object") {              
            html += drawMenu(element.submenu);
        }
    });

    html += '</ul>';

    return html;
}


var menu_html = drawMenu(menu);
document.getElementById('menu').innerHTML = menu_html;
}

jsfiddle: http://jsfiddle.net/n3908g7u/

---

How can I similarly bind data using transparency.js?

[cfaheyCurveJumper]

Hi @Qclanton ,

I would say you have run up against one of Transparency's limitations. It is a "minimal template engine," and as such, it isn't designed for true recursiveness.

Even if you know there is a maximum depth to your submenus, you'd probably write far more html and js to accomplish the same thing you've already done.

HTH!