JSONファイルからチェックボックスを含むツリーにデータをロード

Question

私はWebアプリケーションの拡張ツリーを作成しようとしていますが、JSONファイルから動的にツリーを埋め込むためのデータを取得できません。私はSOFの別の投稿からこのコードを見つけました。 ここに私のJSONファイルが呼び出されtree_data.json：

$.getJSON("tree_data.json", function(treedata)){ 
//$.each(treedata.data, function(i, field){ 
$(function() { 
    addItem($('#root'), treedata); //first call to add item which passes the main parent/root. 
    $(':checkbox').change(function() { 
     $(this).closest('li').children('ul').slideToggle(); 
    }); 
    $('label').click(function(){ 
     $(this).closest('li').find(':checkbox').trigger('click'); 
    }); 
});//} 
function addItem(parentUL, branch) { 
    for (var key in branch.children) { //for each key in child in data 
     var item = branch.children[key]; //assign each child in variable item 
     $item = $('<li>', {  //jquery object 
      id: "item" + item.id 
     }); 
     $item.append($('<input>', { //add check boxes 
      type: "checkbox", 
      id: "item" + item.id, 
      name: "item" + item.id 
     })); 
     $item.append($('<label>', { //add labels to HTML. For every id, display its title. 
      for: "item" + item.id, 
      text: item.title 
     })); 
     parentUL.append($item); 
     if (item.children) { 
      var $ul = $('<ul>', { 
       style: 'display: none' 
      }).appendTo($item); 
      $item.append(); 
      addItem($ul, item); //recursive call to add another item if there are more children. 
     } 
    } 
}} 

私が注文グラブにこのコードを変更する多くの援助を必要とする：

{ 
"Data": { 

    "id": "0", 
    "title": "root-not displayed", 
    "children": { 
     "id": "1", 
     "title": "Option 1", 
     "children": { 
      "id": "11", 
      "title": "Option 11", 
      "children": { 
       "id": "111", 
       "title": "Option 111", 
       "id": "112", 
       "title": "Option 112" 
      } 
     } 
    } 
} 

}ここで

は、HTML内に埋め込まjavascriptのコードですJSONデータとツリーの作成どんな助けでも大歓迎です。ありがとうございました。

Answer 1

まず第一に、あなたはすべての子供たちをカプセル化する必要がJSON配列内のオブジェクト、あなたが（111と112のように）それぞれの子供たちに、単一または複数のオブジェクトを持つことができます。だから、そのようにするJSONを変更します。

{ 
    "Data": { 
    "id": "0", 
    "title": "root-not displayed", 
    "children": [{ 
     "id": "1", 
     "title": "Option 1", 
     "children": [{ 
      "id": "11", 
      "title": "Option 11", 
      "children": [{ 
       "id": "111", 
       "title": "Option 111" 
       }, 
       { 
       "id": "112", 
       "title": "Option 112" 
       }] 
      }] 
     }] 
    } 
} 

を今、作業コードベースは（実施例付き）があります：

$(function() { 
 
    var treedata = JSON.parse('{"Data": {"id": "0","title": "root-not displayed","children": [{ "id":"1","title":"Option 1","children": [{"id": "11","title": "Option 11","children": [{"id": "111","title": "Option 111"},{"id": "112","title": "Option 112"}]}]}]}}'); //JUST FOR MOCKUP THE JSON CALL 
 

 
    addItem($('#root'), treedata.Data); //first call to add item which passes the main parent/root. 
 
    $(':checkbox').change(function() { 
 
     $(this).closest('li').children('ul').slideToggle(); 
 
    }); 
 
    $('label').click(function(){ 
 
     $(this).closest('li').find(':checkbox').trigger('click'); 
 
    }); 
 
});//} 
 

 
function addItem(parentUL, branch) { 
 
      $.each(branch.children, function(i){ 
 
     var item = branch.children[i]; //assign each child in variable item 
 
     $item = $('<li>', {  //jquery object 
 
      id: "item" + item.id 
 
     }); 
 
     $item.append($('<input>', { //add check boxes 
 
      type: "checkbox", 
 
      id: "item" + item.id, 
 
      name: "item" + item.id 
 
     })); 
 
     $item.append($('<label>', { //add labels to HTML. For every id, display its title. 
 
      for: "item" + item.id, 
 
      text: item.title 
 
     })); 
 
     parentUL.append($item); 
 
     if (item.children) { 
 
      var $ul = $('<ul>', { 
 
      }).appendTo($item); 
 
      addItem($ul, item); //recursive call to add another item if there are more children. 
 
     }  
 
     }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="root"> 
 
</div>

今ちょうどあなたのgetJSONを使う代わりに、私のモックアップデータとあなたはうまくいくはずです:)