Функция генератора рекурсивного списка в javascript

Question

У меня есть скрипка here.

Следующий код генерирует список HTML от объекта

function generateList(data, $e) { 
    // create an inner item 
    function createInner(obj) { 
     var li = $('<li>'); 
     li.text(obj.text); 
     if (obj.children != undefined && obj.children.length > 0) { 
      innerList = $('<ul>'); 
      for (var i = 0; i < obj.children.length; i++) { 
       var child = obj.children[i]; 
       innerList.append(createInner(child)); 
      }; 
      li.append(innerList); 
     } 

     return li; 
    } 
    for (var i = 0; i < data.length; i++) { 
     $e.append(createInner(data[i])); 
    } 
} 

Следующий набор данных был использован в качестве примера -

[ 
    { 
     "text": "item1" 
    }, 
    { 
     "text": "item2", 
     "children": [ 
      { 
       "text": "subItem", 
      }, 
      { 
       "text": "another subItem", 
      }, 
      { 
       "text": "last subItem", 
      } 
     ], 
    }, 
    { 
     "text": "item3", 
     "children": [ 
      { 
       "text": "Hello", 
      }, 
      { 
       "text": "Inner List", 
       "children": [ 
        { 
         "text": "innerItem1", 
        }, 
        { 
         "text": "innerItem2", 
        } 
       ] 
      }, 
      { 
       "text": "Bye", 
      } 
     ], 
    } 
] 

Элемент списка, который элемент3 написан должен иметь внутренний список содержащий еще двух детей, но этого не происходит. Элемент, помеченный как Inner List, не отображается на выходе html. Также не обозначен пункт Hello. item3 содержит только innerItem1, innerItem2 и Bye.

Как я могу это преодолеть?

Answer 1

Вместо того, чтобы пытаться добавить результаты, возвращаемые рекурсивно, ваша рекурсивная функция может принимать два параметра. Узел данных для добавления и родительского элемента для добавления результата в. Они будут работать параллельно на любую глубину:

JSFiddle:http://jsfiddle.net/TrueBlueAussie/r69ex6k3/3/

function generateList(data, $e) { 
    // create an inner item 
    function createInner(obj, $target) { 
     var li = $('<li>').appendTo($target); 
     li.text(obj.text); 
     if (obj.children != undefined && obj.children.length > 0) { 
      var innerList = $('<ul>').appendTo(li); 
      for (var i = 0; i < obj.children.length; i++) { 
       var child = obj.children[i]; 
       createInner(child, innerList); 
      }; 
     } 
    } 
    for (var i = 0; i < data.length; i++) { 
     createInner(data[i], $e); 
    } 
} 

Результирующий HTML выглядит следующим образом:

<ul class="sample"> 
    <li>item1</li> 
    <li>item2 
     <ul> 
      <li>subItem</li> 
      <li>another subItem</li> 
      <li>last subItem</li> 
     </ul> 
    </li> 
    <li>item3 
     <ul> 
      <li>Hello</li> 
      <li>Inner List 
       <ul> 
        <li>innerItem1</li> 
        <li>innerItem2</li> 
       </ul> 
      </li> 
      <li>Bye</li> 
     </ul> 
    </li> 
</ul> 

Answer 2

Вы получили переменную проблема, где InnerList был глобальная переменная. Всегда указывайте переменные в начале области. (http://javascript.crockford.com/code.html#variable%20declarations)

Вот ответ: JSFiddle: http://jsfiddle.net/r69ex6k3/5/

Просто необходимо, чтобы очистить функцию немного (createInner)

function createInner(obj) { 
     var li = $('<li>'), 
      innerList, 
      child; 
     li.text(obj.text); 
     if (obj.children && obj.children.length) { 
      innerList = $('<ul>'); 
      for (var i = 0; i < obj.children.length; i++) { 
       child = obj.children[i]; 
       innerList.append(createInner(child)); 
      }; 
      li.append(innerList); 
     } 

     return li; 
    }