title: Iterative Function Nesting with jQuery
body: <p>Currently, I am trying to provide a more dynamic interface for a set of controls using PHP to interface with a MySQL database and to form a json string that gets sent to a client-side script.</p>
  
  <p>Everything about it works except that I can't seem to nest a function call within itself. My suspicions are telling me maybe its an issue with variable scope, but I don't know how to go about testing if that's even the cause.</p>
  
  <p><strong>JSON:</strong></p>
  
  <pre><code>{
    "Categories": {
      "2": {
        "Name": "Store Name",
        "Parent": "0",
        "Prefix": "SN",
        "Published": "1"
      },
      "5": {
        "Name": "Apparel",
        "Parent": "2",
        "Prefix": "A",
        "Published": "1"
      },
      "27": {
        "Name": "Hats",
        "Parent": "5",
        "Prefix": "H",
        "Published": "1"
      }
    }
  }
  </code></pre>
  
  <p><strong>JQuery:</strong></p>
  
  <pre><code>(function(){
  
    function jint_categories(parentId, categoryData) {
      var jObjUL = $('&lt;ul /&gt;');
      $.each(categoryData.Categories, function(key_i, val_i) {
        if(parseInt(val_i.Parent) == parseInt(parentId)) {
          var jObjLI = $('&lt;li class="category" /&gt;').appendTo(jObjUL);
          var jObjDiv = $('&lt;div class="controls" /&gt;').appendTo(jObjLI);
          $('&lt;a href="#" class="view"&gt;&amp;nbsp;&lt;/a&gt;').appendTo(jObjDiv);
          $('&lt;a href="" class="edit"&gt;'+val_i.Name+'&lt;/a&gt;').appendTo(jObjDiv);
          jint_categories(val_i.Parent, categoryData).appendTo(jObjLI);
        }
      });
      return jObjUL;
    }
  
    var jJsonData, jJsonDiv;
  
    $(document).on('ready', function() {
  
      // Prepare Interface Container
      jJsonDiv = $('#jint-categories');
      jJsonData = $.parseJSON(jJsonDiv.html());
      jJsonDiv.empty();
  
      // Populate Interface Container
      $(jint_categories(0, jJsonData)).appendTo(jJsonDiv);
  
    }
  
  })();
  </code></pre>
  
  <p>When I comment out the self-reference inside the function, the top level of my category tree is returned as expected. The only error message I get in Chrome Console is "error" and the stack the operation took (useless here because only 1 thing is being done by this script).</p>
  
  <p>Again, my suspicions are currently centering around variable scope within the function, which may or may not be the cause. Any ideas at all would be greatly appreciated!</p>