Как рекурсивно создавать из массива список?

#javascript

Есть задача: написать в JS функцию которая генерирует из массива список.
Функцию я написал но она работает только на первом уровне вложенности. 
Помогите сделать так чтобы работало не зависимо от количества уровней вложенности.
Вот код:

var arr = [1,2,3,4,5,[4,6,7,9,0],6,7]
var generateList = function(a) {
    var ul = document.createElement('ul');
    a.forEach(function (item) {
    var li = document.createElement('li');
    if(!Array.isArray(item)) {
        li.innerText = item;
    } else {
        var new_ul = document.createElement('ul');
        item.forEach(function(item){
            var li = document.createElement('li');
            li.innerText = item;
            new_ul.appendChild(li);
        })
        li.appendChild(new_ul);
    }

    ul.appendChild(li);
})
    return ul;

}
document.body.appendChild(generateList(arr));

    

Ответы

Ответ 1

Задача рекурсивна сама по себе: если элемент - массив, то вызвать функцию generateList,
передав ей этот элемент.

В коде для этого уже сделано половина дела. Нужно заменить цикл прохода по вложенному
элементу

var new_ul = document.createElement('ul');
item.forEach(function(item){
    var li = document.createElement('li');
    li.innerText = item;
    new_ul.appendChild(li);
})


На вызов основной функции:

var new_ul = generateList(item);


Этого уже хватит для решения поставленной задачи.

В дополнение, можно заменить forEach на более подходящий reduce, так как в коде происходит
ни что иное, как свертка массива в один элемент.

В итоге код может выглядеть так:



var arr = [1, [2, [3], 4], 5, [4, [6, 7], 9, 0], 6, 7]
var generateList = function(items) {
  return items.reduce((ul, item) => {
    var li = document.createElement('li');
    if (!Array.isArray(item)) {
      li.innerText = item;
    } else {
      var new_ul = generateList(item);
      li.appendChild(new_ul);
    }

    ul.appendChild(li);
    return ul;
  }, document.createElement('ul'));
}
document.body.appendChild(generateList(arr));






Вариант без рекурсии: берем из списка элементы, пока не закончатся. Если элемент,
число - добавляем li, если массив - добавляем каждый элемент массива в список, сохраняя
с ним ul в который надо будет все добавлять.



var arr = [1, [2, [3], 4], 5, [4, [6, 7], 9, 0], 6, 7];
var generateList = function(items) {
  var stack = items;
  var root = document.createElement('ul');

  while (stack.length) {
    var item = stack.shift();
    var ul = item.ul || root;
    var value = item.value != null ? item.value : item;
    var li = document.createElement('li');

    if (!Array.isArray(value)) {
      li.innerText = value;
    } else {
      var nestedUl = document.createElement('ul');
      li.appendChild(nestedUl);
      value.reduceRight((stack, el) => {
        stack.unshift({
          value: el,
          ul: nestedUl
        });
        return stack;
      }, stack);

    }
    ul.appendChild(li);
  }
  return root;
}
document.body.appendChild(generateList(arr));


Ответ 2

var arr = [1,[[[[['Всё почти получилось']]]]],2,3,4,5,[4,6,7,[4,6,7,9,0,[4,6]],9,0],6,7]
var generateList = function(a, parent) {
    var ul = document.createElement('ul');
    a.forEach(item => {
       var li = document.createElement('li');
       if(!Array.isArray(item)) {
         li.innerText = item;
       } else {
         li.appendChild(generateList(item, ul));
       }
       ul.appendChild(li);
    })
    return ul;
}
document.body.appendChild(generateList(arr));