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

Posted 2023-05-08

【中文标题】如何将下一级json数据附加到树视图结构中

【英文标题】：how to append next next level json data into tree view structure

【发布时间】：2016-12-29 22:31:12

【问题描述】：

我想附加 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/

【问题讨论】：

不清楚你真正想问什么。您有 json 并希望在列表项中显示 json？

是的，我想显示在列表项中

好的，请编辑您的问题。说：有了这个 JSON：（然后显示 json）我想得到这个结果（然后显示 HTML）这就是我到目前为止所拥有的：（显示你的 javascript）还请说出你已经尝试过做什么以及看起来如何成为问题。还提供一个 json 的小提琴，以及创建 html 的 javascript。您是否考虑过使用车把之类的模板？

您也说 group.title 和 evendData.title 但在您的示例中找不到它们。

【参考方案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/