How to structure JSON and build HTML via jQuery

Question

Beginner here trying to figure out best way to structure some JSON and output the below nested

Each of the bolded items below are the values in the JSON. How

Answer 1

You can use DOM-like methods to set attributes and text content instead to avoid the HTML-escaping issues you'll have with plain html()-setting and the more naïve of the templating systems. For example using jQuery 1.4 and with JSON input along the lines of calvinf's example:

var ul0= $('
');
$.each(topics, function() {
    var li0= $('
', {text: this.title});
    var ul1= $('
');
    $.each(this.items, function() {
        ul1.append($('
', {id: 'foo_'+this.title})
            .append($('', {href: this.link, text: this.text})
                .append($('', {text: this.data0}))
                .append($('', {text: this.data1}))
                .append($('', {text: this.data2}))
            )
        );
    });
    li0.append(ul1);
    ul0.append(li0);
});