JavaScript: Как создать неупорядоченный список из массива?

Question

У меня есть следующий массив, и я хочу создать из него неупорядоченный список, но у меня возникают проблемы с созданием неупорядоченного списка в правильном формате. Я искал аналогичные вопросы, но ни одно из существующих решений не работает для моей проблемы.

var myArray = ['Value 1', ['Inner value 1', 'Inner value 2', 'Inner value 3', 'Inner value 4'], 'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6']; 

Вот мой код JavaScript:

function arrToUl(arr) { 
    var div = document.getElementById('myList'); 
    var ul = document.createElement('ul'); 

    for (var i = 0; i < arr.length; i++) { 

    if (arr[i] instanceof Array) { 
     var list = arrToUl(arr[i]); 
    } else { 
     var li = document.createElement('li'); 
     li.appendChild(document.createTextNode(arr[i])); 
     console.log(ul.appendChild(li)); 
    } 
    div.appendChild(ul); 
    } 
} 

arrToUl(myArray); 

Приведенный выше код производит следующий результат:

<ul> 
<li>Value 1</li> 
<li>Inner Value 1</li> 
<li>Inner Value 2</li> 
<li>Inner Value 3</li> 
<li>Inner Value 4</li> 
<li>Value 2</li> 
<li>Value 3</li> 
<li>Value 4</li > 
<li>Value 5</li > 
<li>Value 6</li> 

Но результат должен выглядеть следующим образом:

<ul> 
<li>Value 1 
    <ul> 
     <li>Inner Value 1</li> 
     <li>Inner Value 2</li> 
     <li>Inner Value 3</li> 
     <li>Inner Value 4</li> 
    </ul> 
</li> 
<li>Value 2</li> 
<li>Value 3</li> 
<li>Value 4</li> 
<li>Value 5</li> 
<li>Value 6</li> 

Благодарим за помощь.

Answer 1

Вы добавили все элементы <ul> в myList <div>. Чтобы изменить это, я добавил новый параметр в функцию arrToUl(root, arr).

Новый параметр, root, определяет, к кому необходимо добавить созданный <ul>, поэтому, если функция встречается с подматрицей, она использует предыдущий элемент списка в качестве корня для создания под-списка.

var myArray = ['Value 1', ['Inner value 1', 'Inner value 2', 'Inner value 3', 'Inner value 4'], 'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6']; 
 

 
function arrToUl(root, arr) { 
 
    var ul = document.createElement('ul'); 
 
    var li; 
 
    
 
    root.appendChild(ul); // append the created ul to the root 
 

 
    arr.forEach(function(item) { 
 
    if (Array.isArray(item)) { // if it's an array 
 
     arrToUl(li, item); // call arrToUl with the li as the root 
 
     return; 
 
    } 
 
    
 
    li = document.createElement('li'); // create a new list item 
 
    li.appendChild(document.createTextNode(item)); // append the text to the li 
 
    ul.appendChild(li); // append the list item to the ul 
 
    }); 
 
} 
 

 
var div = document.getElementById('myList'); 
 

 
arrToUl(div, myArray);

<div id="myList"></div>

Answer 2

Вы можете сохранить последний li и добавить к нему с расширенной функции с целевой DOM элемента.

function iter(target) { 
 
    var ul = document.createElement('ul'), 
 
     li; 
 

 
    target.appendChild(ul); 
 
    return function (a) { 
 
     if (Array.isArray(a)) { 
 
      if (!li) { 
 
       li = document.createElement('li'); 
 
       ul.appendChild(li); 
 
      } 
 
      a.forEach(iter(li)); 
 
      return; 
 
     } 
 
     li = document.createElement('li'); 
 
     li.appendChild(document.createTextNode(a)); 
 
     ul.appendChild(li); 
 
    }; 
 
} 
 

 
var myArray = ['Value 1', ['Inner value 1', 'Inner value 2', 'Inner value 3', 'Inner value 4'], 'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6']; 
 

 
myArray.forEach(iter(document.getElementById('myList')));

<div id="myList"></div>

Answer 3

Ваш рекурсивный подход ничего о том, где он должен добавить новый ребенок не говорит. Может быть, вы должны дать, каждый раз, когда вы получаете экземпляр массива, последний элемент имеет уникальный идентификатор. И тогда вы можете дать этот идентификатор своим параметрам.

GUID Generator - это хороший способ сделать уникальный идентификатор.

Answer 4

Я бы предложил решение, основанное на рекурсии, кажется мне более ясным и менее подверженным ошибкам. Он производит несколько иной результат, поскольку он сопоставляет каждый элемент массива узлу на одном уровне, и я думаю, что это должен быть результат создания ul из массива.

var myArray = [ 
    'Value 1', 
    ['Inner value 1', 'Inner value 2', 'Inner value 3', 'Inner value 4'], 
    'Value 2', 
    'Value 3', 
    'Value 4', 
    'Value 5', 
    'Value 6' 
]; 

function appendItems(arr, el) { 
    if(!arr.length) return el; 
    else { 
     var head = arr.shift(); 
     var child = transform(head); 
     var li = document.createElement('li'); 
     li.appendChild(child); 
     el.appendChild(li); 
     return appendItems(arr, el); 
    } 
} 

function transform(item) { 
    if(Array.isArray(item)) { 
    var ul = document.createElement('ul'); 
    return appendItems(item, ul); 
    } else { 
    return document.createTextNode(item); 
    } 
} 

var ul = transform(myArray); 

Если вы хотели бы иметь выход вы упомянули, что может быть лучше, чтобы изменить формат ввода для того, чтобы соответствовать одной итерации для каждого узла. Ex:

var arr = [ 
    {label: 'value1', subitems: ['Inner value 1', 'Inner value 2', 'Inner value 3', 'Inner value 4']} 
]; 

Answer 5

Ваша функция называется arrToUl, поэтому он должен просто сделать это: преобразовать массив к ul.

После того, как у вас есть ul, вы можете вставить его туда, где хотите, но воспользуйтесь функцией снаружи.

Тогда все становится ясно.

function arrToUl(arr) { 
 
    var ul = document.createElement('ul'), li; 
 
    for (var i = 0; i < arr.length; i++) { 
 
    if (Array.isArray(arr[i])) { 
 
     li.appendChild(arrToUl(arr[i])); 
 
    } else { 
 
     li = document.createElement('li'); 
 
     li.appendChild(document.createTextNode(arr[i])); 
 
     ul.appendChild(li); 
 
    } 
 
    } 
 
    return ul; 
 
} 
 
var myArray = ['Value 1', ['Inner value 1', 'Inner value 2', 'Inner value 3', 'Inner value 4'], 'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6']; 
 
document.body.appendChild(arrToUl(myArray));