CODEWITHSUNDEEP
javascriptjqueryhtmljsonmenu
Vinícius Duarte
Vinícius Duarte

Reputation: 17

How to insert JSON into an accordion menu dynamically?

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.

$.getJSON("menu.json", function(data) {
  createHtml(data.menu);
});

function createHtml(menuJson) {
  var html = '';


  $.each(menuJson, function(i, item) {
    if (item.sub) {

      html += '<li class="has-children">'+
                '<input type="checkbox" checked/>'+
                '<label><span class="'+item.icon+'"></span>  '+
                item.name+'</label><ul>'
      html += createHtml(item.sub);
      html += '</ul></li>';
    } else {
      html += '<li><a href="'+item.link+'"><i class="'+item.icon
            + 'mmenu-icon"></i>&nbsp; '+item.name+'</a></li>';
    }
    return html;
  })
  $(".cd-accordion-menu").html(html);

}

HTML:

    <ul class="cd-accordion-menu animated">
    <li class="has-children">
        <input type="checkbox" name ="group-1" id="group-1" checked>
        <label for="group-1">Group 1</label>

        <ul>
            <li class="has-children">
                <input type="checkbox" name ="sub-group-1" id="sub-group-1">
                <label for="sub-group-1">Sub Group 1</label>
                <ul>
                    <li><a href="#0">Image</a></li>
                    <li><a href="#0">Image</a></li>
                    <li><a href="#0">Image</a></li>
                </ul>
            </li>
            <li class="has-children">
                <input type="checkbox" name ="sub-group-2" id="sub-group-2">
                <label for="sub-group-2">Sub Group 2</label>
                <ul>
                    <li class="has-children">
                        <input type="checkbox" name ="sub-group-level-3" id="sub-group-level-3">
                        <label for="sub-group-level-3">Sub Group Level 3</label>
                        <ul>
                            <li><a href="#0">Image</a></li>
                            <li><a href="#0">Image</a></li>
                        </ul>

How can I modify the function to get better adpater to the template?

Upvotes: 0

Views: 858

Answers (1)

epascarello
epascarello

Reputation: 207511

The logic is flawed with this menu. You are returning inside of a forEach, which makes no sense and you are setting the html for the menu so the main menu and the recursive calls. That is also wrong.

The return needs to be outside the forEach and the setting of the menu call needs to be done somewhere else.

$.getJSON("menu.json", function(data) {
  var html = createHtml(data.menu);
  $(".cd-accordion-menu").html(html); //set html here
});

function createHtml(menuJson) {
  var html = '';
  $.each(menuJson, function(i, item) {
    if (item.sub) {
      html += '<li class="has-children">' +
        '<input type="checkbox" checked/>' +
        '<label><span class="' + item.icon + '"></span>  ' +
        item.name + '</label><ul>'
      html += createHtml(item.sub);
      html += '</ul></li>';
    } else {
      html += '<li><a href="' + item.link + '"><i class="' + item.icon +
        'mmenu-icon"></i>&nbsp; ' + item.name + '</a></li>';
    }
  })
  return html; //return html outside of the loop
}

Upvotes: 1

Related Questions