HTML дерево из массива (рекурсия)

29 января 2022, 08:50

Помогите доработать хтмл дерево (рекурсия). Первый уровень сделал а следующий не получается. При нажатти кнопки +, должны открываться следующие вкладки согласно массива и менять знак на -.

const tree = [
  {
    name: "Desktop (Public)",       
    url: "https://www.google.com",  
    type: "folder",                 
    tabs: [
        {
            name: "Programs",    
            type: "file",    
            url: "https://www.google.com"  
        },
        {
            name: "Photos",  
            type: "file",     
            url: "https://www.google.com"  
        },
        {
            name: "Other",  
            type: "file",    
            url: "https://www.google.com"  
        }                          
    ]
  }, {
    name: "Program Files (32-bit)",       
    url: "https://www.google.com",
    type: "folder", 
    tabs: [
        {                                                 
            name: "ProductName",  
            type: "file",     
            url: "https://www.google.com" 
        },
        {
            name: "Common Files",  
            type: "file",     
            url: "https://www.google.com" 
        },
        {
            name: "Microsoft Office", 
            type: "file",      
            url: "https://www.google.com"
        }
    ]
  }, {
    name: "ProgramData",       
    url: "https://www.google.com",
    type: "folder", 
    tabs: [
        {
            name: "Publisher",     
            type: "file",                     
            url: "https://www.google.com"
        },
        {
            name: "InstallMate",  
            type: "file",     
            url: "https://www.google.com" 
        }
    ]
  }
];
function addList () {
  for (let i = 0; i < tree.length; i++) {
    let selectUL = document.querySelector("ul");
    let firstLevel = tree[i].tabs;
    if (tree[i].type == "folder") {
        selectUL.insertAdjacentHTML("beforeend", `<li class="firstLevel"> <button class="addTabs">+</button> ${tree[i].name} </li>`);
    } else {
        console.log("Error folder");
    }

    for (let j = 0; j < firstLevel.length; j++) {
        if (firstLevel[j].type == "file") {
        } else {
            console.log("Error file");
        }
    }
  }
}

https://jsfiddle.net/7hk8bv9f/6/

Answer 1

А где, собственно, вы в своем коде разместили именно рекурсию?

<!DOCTYPE html>
<html>
  <head>
    <title>Drag and drop</title>
    <style>
      .box {
        border: 1px solid black;
        border-collapse: collapse;
        background-color: white;
        max-height: 150px;
        align-items: center;
        padding: 3px;
      }
      .box > * :nth-child(2n) {
        background-color: whitesmoke;
      }
      .box > .box {
        display: none;
      }
      .box:hover > .box {
        display: block;
        position: relative;
        left: 155px;
      }
    </style>
  </head>
  <body>
    <script>
      (function() {
        const generateStart = (containter, item = {
          name: 'Start',
          child: [
            { name: 'Accessibility', child: [
              { name: 'PaintFolder', child: [{ name: 'Paint' }] },
              { name: 'WordFolder', child: [{ name: 'Word' }] }
            ]}
          ]
        }) => {
          const box = document.createElement('div');
          box.className = "box";
          const title = document.createElement('p');
          title.innerText = item.name;
          box.appendChild(title);
          if (item.child) {
            item.child.forEach((child) => generateStart(box, child));
          }
          containter.appendChild(box);
        };
        generateStart(document.body);
      })();
    </script>
  </body>
</html>

Посмотреть онлайн можно тут.

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Какие есть библиотеки для реализации загрузки xlsx файла, кроме Apache POI?

такой вопрос, а есть ли еще способы загрузки xlsx файлов, кроме подключения Apache POI? Просто у меня Apache может загружать только xls файлы, а вот с xlsx выдает...

151

Java