Javascript-форум - Из матрицы в древовидное меню

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Из матрицы в древовидное меню (https://javascript.ru/forum/misc/57187-iz-matricy-v-drevovidnoe-menyu.html)

Из матрицы в древовидное меню

Добрый день!

В javascript пока в процессе знакомства, и возникла такая задачка в процессе обучения, которая затормозила...
Есть матрица [1,2,[3,4,[5,6,7],8],9,10].
С помощью функции (желательно, рекурсивной), нужно её превратить в меню вида:

<ul>
<li>1</li>
<li>2</li>
   <ul>
     <li>3</li>
     <li>4</li>
        <ul>
          <li>5</li>
          <li>6</li>
          <li>7</li>
        </ul>
     <li>8</li>
   </ul>
<li>9</li>
<li>10</li>
</ul>

Написала такой код:

function recursiveList (data) {
        var arr = data;
        var list = document.getElementById('list'); 
        var newlist = document.createElement('ul');
          for (var i = 0; i < arr.length; i++) {
                   var item = document.createElement("li");
                   item.appendChild(document.createTextNode(arr[i]));
                   newlist.appendChild(item);
            };
        list.appendChild(newlist);       
         for (var i = 0; i < arr.length; i++) {
           if (typeof(arr[i]) == 'object') {
                    return recursiveList(arr[i]);
            }
        };   
    
     return list;    
    }

Но пока что получаю значения в виде:

<ul>
<li>1</li>
<li>2</li>
<li>3 4 5 6 7 8</li>
<li>9</li>
<li>10</li>
</ul>

<ul>
  <li>3</li>
  <li>4</li>
  <li>5 6 7</li>
  <li>8</li>
</ul>

<ul>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

Что нужно сделать, чтоб привести её в нужный вид? Буду очень благодарна помощи! :victory:

создание дерева ul li из массива

АлександраМТ,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>
<body>
<script>
var data = [1,2,[3,4,[5,6,7],8],9,10];
function recursiveList(data) {
    var newlist = document.createElement("ul"),
        item;
    for (var i = 0; i < data.length; i++) {
        if (typeof data[i] == "object") item = recursiveList(data[i]);
        else {
            item = document.createElement("li");
            item.appendChild(document.createTextNode(data[i]))
        }
        newlist.appendChild(item)
    }
    return newlist
};
document.body.appendChild(recursiveList(data))
</script>
</body>

</html>

Цитата:

Сообщение от АлександраМТ

Есть матрица

А с какой стороны это матрица?

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

<html>


<head>
</head>
<body>



<script>




with(document){

div=createElement("div")

div.innerHTML=JSON.stringify([1,2,[3,4, [5, 6, 7], 8], 9, 10])
 .replace(/\[/g, "<ul>")
 .replace(/\]/g, "</ul>")
 .replace(/(\d+)/g, "<li>$1</li>")
 .replace(/,/g, "")

body.appendChild(div)

}



</script>
</body>
</html>

Цитата:

Сообщение от рони (Сообщение 381078)

АлександраМТ,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>
<body>
<script>
var data = [1,2,[3,4,[5,6,7],8],9,10];
function recursiveList(data) {
    var newlist = document.createElement("ul"),
        item;
    for (var i = 0; i < data.length; i++) {
        if (typeof data[i] == "object") item = recursiveList(data[i]);
        else {
            item = document.createElement("li");
            item.appendChild(document.createTextNode(data[i]))
        }
        newlist.appendChild(item)
    }
    return newlist
};
document.body.appendChild(recursiveList(data))
</script>
</body>

</html>

Спасибо большое за помощь! Вы очень помогли)

Цитата:

Сообщение от tysonfury2015

А с какой стороны это матрица?

Массив, ошиблась...

Цитата:

Сообщение от tysonfury2015

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

Это да, в разы быстрее. Но по заданию именно с рекурсией требуется. Но такое решения я тоже запомню. Спасибо)