Программно создайте список HTML и покажите дочерние элементы по щелчку

Question

Я пытаюсь создать список HTML из массива JSON, где, если объект списка содержит дочерний массив из «уровней», тогда нажатие на элемент списка должно показывать уровни как последующие список элементов. Уровни должны быть скрыты по умолчанию, пока родитель не щелкнули (см ниже графики)

Пожалуйста, смотрите мою попытку кода ниже

$('#menuList ul') 
     .append(
      $('<li></li>') 
       .append(
        $('<a></a>') 
         .attr('href', '#') 
         .click(function (e) { 

          if (result.levels) { 
           //if child levels, show levels on parent click 
           var thelevels = result.levels; 
           thelevels.forEach(function (level) { 
            console.log(level); 
           }); 
          } 
          // where I handle the click event 
          doStuff(el, this.text); 
          e.preventDefault(); 
         }) 
         .data('myName', result.name) 
         .data('myNumber', result.mynumber) 
         .text(result.name) 
       ) 
     ); 

Образец данных:

{ 
      "result_id": 7, 
      "name": "My Name", 
      "mynumber": "11", 
      "levels": [ 
       0, 
       1, 
       2 
      ] 
     } 

макете

Answer 1

На основании вашего ответа вы можете это сделать mething так:

// define construct table function, run through response and build table rows 
// if there is levels, build levels, all in memory, not appended to DOM yet. 
function constructTable(response) { 
    var html = $("div"); // create div, but not append it yet to DOM 

    for(var i = 0; i < response.length; i++) { 
     var item = response[i]; 

     var itemHtml = '<div class="item" data-id="' 
       + item.result_id 
       + '">' 
       + '<p class="title">' 
       + item.name 
       + '</p>' 
       + '<div class="subItems">' 
       + '</div>' 
       + '</div>'; 

     var $itemHtml = $(itemHtml); 

     if(item.levels.length) { 
      for(var j = 0; j < item.levels.length; j++) { 
       var subItem = item.levels[j]; 
       var subItemHtml = '<div class="subItem" data-id="' + subItem + '">' + "SubItem " + subItem + '</div>'; 

       $itemHtml.find('.subItems').append(subItemHtml); 
      } 
     } 

     html.append($itemHtml); 
    } 
    return html; 
} 

var table = constructTable(response); // call function with response 

$(".container").append(table); // append table to container at once, with all 
// rows and sub items rendered. 

// event for handling toggle of sub items. 
$(".item").on("click", function() { 
    $(this).find('.subItems').toggle(); 
}); 

Вот jsfiddle: http://jsfiddle.net/kdynfezw/6/

Но вы должны смотреть на Backbone и MarionetteJS и его CompositeView.

http://marionettejs.com/docs/v2.4.3/marionette.compositeview.html

Он обрабатывает структуру, как это только хорошо.