Json Data Into Html List That Looks Like A Table

Have nested JSON array and currently trying to create a HTML list ul/li type that also resembles a table. Here is my JSON data, questions is name of object. { 'aaData': [ {

Solution 1:

Here is a simple prototype function to get you started.

varMenu = function (data) {
    this.data = data;
};

Menu.prototype.render = function (root) {
    var ul = $("<ul></ul>");
    var li = $("<li></li>");
    li.append($("<a></a>", {
        url: this.data.id,
        text: this.data.question
    })).appendTo(ul);
    ul.appendTo(root);
    if (this.data.subquestions) {
        Menu.renderMenus(this.data.subquestions, $("<li></li>").appendTo(ul));
    }
};

Menu.renderMenus = function (menus, root) {
    $.each(menus, function (key, val) {
        var m = newMenu(val);
        m.render(root);
    });
}

Menu.renderMenus(aaData, $("#test"));

DEMO

You can obviously add more fields to the data where needed.

UPDATE

Per your request to have the nested lists collapsible as seen here, I've updated the my original code as well as made some modifications to the code on the site you referenced.

UPDATED DEMO