angu manikandan angu manikandan - 3 months ago 13
jQuery Question

how to append child level and grand child level json data into tree view structure

I want to append json data to bring tree view structure. Initially I had created static tree view this is my fiddle code with json tree view:



var json = {
"category": [{
"title": "Customer Satisfaction",
"id": "nnanet:category/certified-pre-owned",
"items": [{
"title": "Bulletins",
"id": "nnanet:category/customer-satisfaction/bulletins",
"thirditems": [{
"title": "TOI",
"id": "nnanet:category/retailer-digital-marketing/toi"
}, {
"title": "TOI",
"id": "nnanet:category/retailer-digital-marketing/toi"
}]
}, {
"title": "Consumer Affairs",
"id": "nnanet:category/customer-satisfaction/consumer-affairs"
}, {
"title": "Loyalty",
"id": "nnanet:category/customer-satisfaction/loyalty",
"thirditems": [{
"title": "TOI",
"id": "nnanet:category/retailer-digital-marketing/toi"
}, {
"title": "TOI",
"id": "nnanet:category/retailer-digital-marketing/toi"
}]
}]
}, {
"title": "Retailer Digital Marketing",
"id": "nnanet:category/retailer-digital-marketing",
"items": [{
"title": "TOI",
"id": "nnanet:category/retailer-digital-marketing/toi",
"thirditems": [{
"title": "TOI",
"id": "nnanet:category/retailer-digital-marketing/toi"
}, {
"title": "TOI",
"id": "nnanet:category/retailer-digital-marketing/toi"
}]
}, {
"title": "Basics",
"id": "nnanet:category/retailer-digital-marketing/reference-guide/basics"
}, {
"title": "International",
"id": "nnanet:category/retailer-digital-marketing/international"
}]
}, {
"title": "Finance Today",
"id": "nnanet:category/customer-satisfaction/bulletins/finance-today",
"items": [{
"title": "TOI",
"id": "nnanet:category/retailer-digital-marketing/toi",
"thirditems": [{
"title": "TOI",
"id": "nnanet:category/retailer-digital-marketing/toi"
}, {
"title": "TOI",
"id": "nnanet:category/retailer-digital-marketing/toi"
}]
}, {
"title": "Basics",
"id": "nnanet:category/retailer-digital-marketing/reference-guide/basics"
}, {
"title": "International",
"id": "nnanet:category/retailer-digital-marketing/international"
}]
}, {
"title": "Annual",
"id": "nnanet:category/customer-satisfaction/bulletins/finance-today/revenue/annual",
"items": [{
"title": "TOI",
"id": "nnanet:category/retailer-digital-marketing/toi"
}, {
"title": "Basics",
"id": "nnanet:category/retailer-digital-marketing/reference-guide/basics"
}, {
"title": "International",
"id": "nnanet:category/retailer-digital-marketing/international"
}]
}]
};
function expander(){
var tree = document.querySelectorAll('ul.tree a:not(:last-child)');
for(var i = 0; i < tree.length; i++){
tree[i].addEventListener('click', function(e) {
var element = e.target.parentElement; //actually this is just the elem itself
var parent = element.parentElement

var opensubs = parent.querySelectorAll(':scope .open');
console.log(opensubs);
var classList = element.classList;
if(opensubs.length !=0) {
for(var i = 0; i < opensubs.length; i++){
opensubs[i].classList.remove('open');
}
}
classList.add('open');

});
}
}
$(function(){
var tree = $("ul.tree");
$.each(json.category,function(category){
var categoryValue = json.category[category];
tree.append('<li><a href="#">'+categoryValue.title+'</a><ul></ul></li>');
var el = tree.children("li").children("ul");
$.each(categoryValue.items,function(itemId){
var item = categoryValue.items[itemId];
$(el[category]).append('<li><a href="#">'+item.title+'</a></li>');
if(item.thirditems){
$(el[category]).children("li").append('<ul></ul>');
var el1 = el.children("li").children("ul");
$.each(item.thirditems,function(thirdItemId){
var thirdItem = item.thirditems[thirdItemId];
console.log(el1[itemId]);
$(el1[itemId]).append('<li><a href="#">'+thirdItem.title+'</a><ul></ul></li>');
});
}

});
});
expander();
});

body {
font-family: Arial;
}

ul.tree li {
list-style-type: none;
position: relative;
}

ul.tree li ul {
display: none;
}

ul.tree li.open > ul {
display: block;
}

ul.tree li a {
color: black;
text-decoration: none;
}

ul.tree li a:before {
height: 1em;
padding:0 .1em;
font-size: .8em;
display: block;
position: absolute;
left: -1.3em;
top: .2em;
}

ul.tree li > a:not(:last-child):before {
content: '+';
}

ul.tree li.open > a:not(:last-child):before {
content: '-';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="tree"></ul>





Here I have challenges to append three level json data and upto two level json appending properly. After using
thirditem
condition facing issue.
In my json code there is an array named called as
thirditems
. How to append this
thirditems
array to corresponding parent array?

Exactly inside retailer
digital marketing > sub-ToI > semi-sub-TOI > super-sub-TOI
all the
thirditems
json array is appending to first value only.
Upto two level json data is appending properly but how to append third level of json data?

For more info check this fiddle: https://jsfiddle.net/ak3zLzgd/6/

Answer

I figured it out check this-

var json = {
    "category": [{
        "title": "Customer Satisfaction",
        "id": "nnanet:category/certified-pre-owned",
        "items": [{
            "title": "Bulletins",
            "id": "nnanet:category/customer-satisfaction/bulletins",
            "thirditems": [{
                "title": "TOI",
                "id": "nnanet:category/retailer-digital-marketing/toi"
            }, {
                "title": "TOI",
                "id": "nnanet:category/retailer-digital-marketing/toi"
            }]
        }, {
            "title": "Consumer Affairs",
            "id": "nnanet:category/customer-satisfaction/consumer-affairs"
        }, {
            "title": "Loyalty",
            "id": "nnanet:category/customer-satisfaction/loyalty",
            "thirditems": [{
                "title": "TOI",
                "id": "nnanet:category/retailer-digital-marketing/toi"
            }, {
                "title": "TOI",
                "id": "nnanet:category/retailer-digital-marketing/toi"
            }]
        }]
    }, {
        "title": "Retailer Digital Marketing",
        "id": "nnanet:category/retailer-digital-marketing",
        "items": [{
            "title": "TOI",
            "id": "nnanet:category/retailer-digital-marketing/toi",
            "thirditems": [{
                "title": "TOI",
                "id": "nnanet:category/retailer-digital-marketing/toi"
            }, {
                "title": "TOI",
                "id": "nnanet:category/retailer-digital-marketing/toi"
            }]
        }, {
            "title": "Basics",
            "id": "nnanet:category/retailer-digital-marketing/reference-guide/basics"
        }, {
            "title": "International",
            "id": "nnanet:category/retailer-digital-marketing/international"
        }]
    }, {
        "title": "Finance Today",
        "id": "nnanet:category/customer-satisfaction/bulletins/finance-today",
        "items": [{
            "title": "TOI",
            "id": "nnanet:category/retailer-digital-marketing/toi",
            "thirditems": [{
                "title": "TOI",
                "id": "nnanet:category/retailer-digital-marketing/toi"
            }, {
                "title": "TOI",
                "id": "nnanet:category/retailer-digital-marketing/toi"
            }]
        }, {
            "title": "Basics",
            "id": "nnanet:category/retailer-digital-marketing/reference-guide/basics"
        }, {
            "title": "International",
            "id": "nnanet:category/retailer-digital-marketing/international"
        }]
    }, {
        "title": "Annual",
        "id": "nnanet:category/customer-satisfaction/bulletins/finance-today/revenue/annual",
        "items": [{
            "title": "TOI",
            "id": "nnanet:category/retailer-digital-marketing/toi"
        }, {
            "title": "Basics",
            "id": "nnanet:category/retailer-digital-marketing/reference-guide/basics"
        }, {
            "title": "International",
            "id": "nnanet:category/retailer-digital-marketing/international"
        }]
    }]
};
    function expander(){
        var tree = document.querySelectorAll('ul.tree a:not(:last-child)');
    for(var i = 0; i < tree.length; i++){
        tree[i].addEventListener('click', function(e) {
            var element = e.target.parentElement; //actually this is just the elem itself
            var parent = element.parentElement

            var opensubs = parent.querySelectorAll(':scope .open');
            console.log(opensubs);
            var classList = element.classList;
            if(opensubs.length !=0) {
                    for(var i = 0; i < opensubs.length; i++){
                    opensubs[i].classList.remove('open');
                }
            } 
                classList.add('open');

        });
    }
    }
$(function(){
		var tree = $("ul.tree");
    $.each(json.category,function(category){
    	var categoryValue = json.category[category];
    	tree.append('<li><a href="#">'+categoryValue.title+'</a><ul></ul></li>');
      var el = tree.children("li").children("ul");
      $.each(categoryValue.items,function(itemId){
      	var item = categoryValue.items[itemId];
        $(el[category]).append('<li><a href="#">'+item.title+'</a></li>');
        if(item.thirditems){
        	$(el[category]).children("li").append('<ul></ul>');
          var el1 = $(el[category]).children("li").children("ul");
          $.each(item.thirditems,function(thirdItemId){
            var thirdItem = item.thirditems[thirdItemId];
            
           $(el1[itemId]).append('<li><a href="#">'+thirdItem.title+'</a><ul></ul></li>');
          });
        }
       
      });
    });
    expander();
});
body {
    font-family: Arial;
}

ul.tree li {
    list-style-type: none;
    position: relative;
}

ul.tree li ul {
    display: none;
}

ul.tree li.open > ul {
    display: block;
}

ul.tree li a {
    color: black;
    text-decoration: none;
}

ul.tree li a:before {
    height: 1em;
    padding:0 .1em;
    font-size: .8em;
    display: block;
    position: absolute;
    left: -1.3em;
    top: .2em;
}

ul.tree li > a:not(:last-child):before {
    content: '+';
}

ul.tree li.open > a:not(:last-child):before {
    content: '-';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="tree"></ul>

I have just changed following line-

var el1 = el.children("li").children("ul");

Into-

var el1 = $(el[category]).children("li").children("ul");

Here is updated fiddle.