title: How to insert JSON into an accordion menu dynamically?
body: <p>I need to make a multi-level accordion dynamic menu with JSON. I downloaded a template and I'm trying to adapt my JSON file in this menu, but when I create the sub-menu it returns only an undefined value.</p>
  
  <pre><code>$.getJSON("menu.json", function(data) {
    createHtml(data.menu);
  });
  
  function createHtml(menuJson) {
    var html = '';
  
  
    $.each(menuJson, function(i, item) {
      if (item.sub) {
  
        html += '&lt;li class="has-children"&gt;'+
                  '&lt;input type="checkbox" checked/&gt;'+
                  '&lt;label&gt;&lt;span class="'+item.icon+'"&gt;&lt;/span&gt;  '+
                  item.name+'&lt;/label&gt;&lt;ul&gt;'
        html += createHtml(item.sub);
        html += '&lt;/ul&gt;&lt;/li&gt;';
      } else {
        html += '&lt;li&gt;&lt;a href="'+item.link+'"&gt;&lt;i class="'+item.icon
              + 'mmenu-icon"&gt;&lt;/i&gt;&amp;nbsp; '+item.name+'&lt;/a&gt;&lt;/li&gt;';
      }
      return html;
    })
    $(".cd-accordion-menu").html(html);
  
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;ul class="cd-accordion-menu animated"&gt;
      &lt;li class="has-children"&gt;
          &lt;input type="checkbox" name ="group-1" id="group-1" checked&gt;
          &lt;label for="group-1"&gt;Group 1&lt;/label&gt;
  
          &lt;ul&gt;
              &lt;li class="has-children"&gt;
                  &lt;input type="checkbox" name ="sub-group-1" id="sub-group-1"&gt;
                  &lt;label for="sub-group-1"&gt;Sub Group 1&lt;/label&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#0"&gt;Image&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#0"&gt;Image&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#0"&gt;Image&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li class="has-children"&gt;
                  &lt;input type="checkbox" name ="sub-group-2" id="sub-group-2"&gt;
                  &lt;label for="sub-group-2"&gt;Sub Group 2&lt;/label&gt;
                  &lt;ul&gt;
                      &lt;li class="has-children"&gt;
                          &lt;input type="checkbox" name ="sub-group-level-3" id="sub-group-level-3"&gt;
                          &lt;label for="sub-group-level-3"&gt;Sub Group Level 3&lt;/label&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="#0"&gt;Image&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#0"&gt;Image&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
  </code></pre>
  
  <p>How can I modify the function to get better adpater to the template?</p>