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.
Post a Comment for "Json Data Into Html List That Looks Like A Table"