title: Loading data from JSON file into Tree with checkboxes
body: <p>I am trying to create a expanding tree for my web application but I am not able to bring data from a JSON file to dynamically fill the tree. I found this code from another post on SOF. 
  Here is my JSON file called tree_data.json :</p>
  
  <pre><code>    {
  "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"
              }
          }
      }
  }
  </code></pre>
  
  <p>}</p>
  
  <p>Here is  javascript code imbedded within HTML:</p>
  
  <pre><code>    $.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 = $('&lt;li&gt;', {        //jquery object
              id: "item" + item.id
          });
          $item.append($('&lt;input&gt;', { //add check boxes
              type: "checkbox",
              id: "item" + item.id,
              name: "item" + item.id
          }));
          $item.append($('&lt;label&gt;', { //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 = $('&lt;ul&gt;', {
                  style: 'display: none'
              }).appendTo($item);
              $item.append();
              addItem($ul, item); //recursive call to add another item if there are more children.
          }
      }
  }}
  </code></pre>
  
  <p>I need a lot of help changing this code in order grab the JSON data and creating the tree. Any help would be very appreciated. Thank you.</p>