javascript - How to render nested JSON using jquery in ul and li -
i facing 2 issues 1.i not getting proper html structure see below picture
currently getting html structure: 
what looking html structure:
- how make code dynamic json, eg, json may have 4 level of sub menus not able write loops , condition, trying render json writing nested loops
here code tried:
$(document).ready(function(){ var treejson = {"values":[ { "tree_title":"fashionworld1", "tree_image":"img_arrow", "tree_image_position":"1", "tree_image":"fashionworld", "isopen":"0", "child":[ { "values":[ { "tree_title":"submenulevel11", "tree_image":"img_arrow", "tree_image_position":"1", "tree_image":"fashionworld", "isopen":"0", "child":[ { "values":[ {"tree_title":"submenulevel21"}, {"tree_title":"submenulevel22"}, {"tree_title":"submenulevel23"} ] } ] }, {"tree_title":"submenulevel12"}, {"tree_title":"submenulevel13"} ] } ] }, { "tree_title":"fashionworld2", "tree_image":"img_arrow", "tree_image_position":"1", "tree_image":"fashionworld", "isopen":"0", "child":[ { "values":[ { "tree_title":"submenulevel11", "tree_image":"img_arrow", "tree_image_position":"1", "tree_image":"fashionworld", "isopen":"0", "child":[ { "values":[ {"tree_title":"submenulevel21"}, {"tree_title":"submenulevel22"}, {"tree_title":"submenulevel23"} ] } ] }, {"tree_title":"submenulevel12"}, {"tree_title":"submenulevel13"} ] } ] }, { "tree_title":"fashionworld3", "tree_image":"img_arrow", "tree_image_position":"1", "tree_image":"fashionworld", "isopen":"0", "child":[ { "values":[ { "tree_title":"submenulevel11", "tree_image":"img_arrow", "tree_image_position":"1", "tree_image":"fashionworld", "isopen":"0", "child":[ { "values":[ {"tree_title":"submenulevel21"}, {"tree_title":"submenulevel22"}, {"tree_title":"submenulevel23"} ] } ] }, {"tree_title":"submenulevel12"}, {"tree_title":"submenulevel13"} ] } ] }, { "tree_title":"fashionworld4", "tree_image":"img_arrow", "tree_image_position":"1", "tree_image":"fashionworld", "isopen":"0", "child":[ { "values":[ { "tree_title":"submenulevel11", "tree_image":"img_arrow", "tree_image_position":"1", "tree_image":"fashionworld", "isopen":"0", "child":[ { "values":[ {"tree_title":"submenulevel21"}, {"tree_title":"submenulevel22"}, {"tree_title":"submenulevel23"} ] } ] }, {"tree_title":"submenulevel12"}, {"tree_title":"submenulevel13"} ] } ] } ]}; var treeparentarr = treejson.values; if(treeparentarr.length){ var $ullevel1 = $("<ul />").appendto($("#tree")); //level 1 (var = 0; < treeparentarr.length; i++) { var treeparentval = treeparentarr[i]; var listchildlevel1 = $ullevel1.append($("<li />", { text: treeparentval.tree_title })); var childsubval1 = treeparentval.child; if(childsubval1){ var treechildlevel1 = childsubval1[0].values; //level 2 //check condition data there or not if(treechildlevel1.length){ console.log(i); var $ullevel2 = $("<ul />").appendto($(listchildlevel1)); (var j = 0; j < treechildlevel1.length; j++) { var treechildleveldata1 = treechildlevel1[j]; var listchildlevel2 = $ullevel2.append($("<li />", { text: treechildleveldata1.tree_title })); //level 3 //check condition data there or not var childsubval2 = treechildleveldata1.child; if(childsubval2){ var treechildlevel2 = childsubval2[0].values; if(treechildlevel2.length){ //console.log(treechildlevel2); var $ullevel3 = $("<ul />").appendto($(listchildlevel2)); (var k = 0; k < treechildlevel2.length; k++) { var treechildleveldata2 = treechildlevel2[k]; $ullevel3.append($("<li />", { text: treechildleveldata2.tree_title })); } } } } } } } } }); jsfiddle
is looking for?
$(document).ready(function() { var treejson = { "values": [{ "tree_title": "fashionworld1", "tree_image": "img_arrow", "tree_image_position": "1", "tree_image": "fashionworld", "isopen": "0", "child": [{ "values": [{ "tree_title": "submenulevel11", "tree_image": "img_arrow", "tree_image_position": "1", "tree_image": "fashionworld", "isopen": "0", "child": [{ "values": [{ "tree_title": "submenulevel21" }, { "tree_title": "submenulevel22" }, { "tree_title": "submenulevel23" } ] }] }, { "tree_title": "submenulevel12" }, { "tree_title": "submenulevel13" } ] }] }, { "tree_title": "fashionworld2", "tree_image": "img_arrow", "tree_image_position": "1", "tree_image": "fashionworld", "isopen": "0", "child": [{ "values": [{ "tree_title": "submenulevel11", "tree_image": "img_arrow", "tree_image_position": "1", "tree_image": "fashionworld", "isopen": "0", "child": [{ "values": [{ "tree_title": "submenulevel21" }, { "tree_title": "submenulevel22" }, { "tree_title": "submenulevel23" } ] }] }, { "tree_title": "submenulevel12" }, { "tree_title": "submenulevel13" } ] }] }, { "tree_title": "fashionworld3", "tree_image": "img_arrow", "tree_image_position": "1", "tree_image": "fashionworld", "isopen": "0", "child": [{ "values": [{ "tree_title": "submenulevel11", "tree_image": "img_arrow", "tree_image_position": "1", "tree_image": "fashionworld", "isopen": "0", "child": [{ "values": [{ "tree_title": "submenulevel21" }, { "tree_title": "submenulevel22" }, { "tree_title": "submenulevel23" } ] }] }, { "tree_title": "submenulevel12" }, { "tree_title": "submenulevel13" } ] }] }, { "tree_title": "fashionworld4", "tree_image": "img_arrow", "tree_image_position": "1", "tree_image": "fashionworld", "isopen": "0", "child": [{ "values": [{ "tree_title": "submenulevel11", "tree_image": "img_arrow", "tree_image_position": "1", "tree_image": "fashionworld", "isopen": "0", "child": [{ "values": [{ "tree_title": "submenulevel21" }, { "tree_title": "submenulevel22" }, { "tree_title": "submenulevel23" } ] }] }, { "tree_title": "submenulevel12" }, { "tree_title": "submenulevel13" } ] }] } ] }; var treeparentarr = treejson.values; var tree = buildnodes(treejson, $("#tree")); }); function buildnodes(node, parent) { $(node.values).each(function() { var element = this; var listitem = $("<li />", { text: this.tree_title }) if (this.hasownproperty("child")) { var tree = $("<ul />"); buildnodes(this.child[0], tree); listitem.append(tree) } parent.append(listitem); }); } but 1 question: why need nested values inside of child contains array , use e.g childs holding values objects?
wiki
Comments
Post a Comment