次の次のレベルのjsonデータをツリービュー構造に追加する方法

Question

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

出力：当初、私は、これはJSONツリービューで自分のフィドルコードである静的なツリービューを作成していたこのフィドルをチェック：https://jsfiddle.net/ak3zLzgd/6/