Question

我想附加json数据来引入树视图结构。最初我创建了静态树视图，这是我用json树视图的小提琴代码：https://jsfiddle.net/ak3zLzgd/6/

Here I have challenges to append three level level json data instead of static html code.        
Exactly inside retailer digital marketing > sub-ToI > semi-sub-TOI > super-sub-TOI all the thirditems json array is appending ti first value only .               For more info check this fiddle: https://jsfiddle.net/ak3zLzgd/6/

Answer 1

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();
});

输出：检查这个小提琴：https://jsfiddle.net/ak3zLzgd/6/

如何将下一级json数据附加到树视图结构中

1 个答案: