Сделать древовидное представление из данных

У меня есть данные о папках и их подпапках. Моя проблема в том, что я не знаю, как сделать вложенные подпапки, например, у меня есть массив с папками. У меня есть папка «тест», в которой есть множество меток подпапок, и есть папка «daamn», а внутри этой «daamn» есть другие подпапки. Но эти подпапки «daamn» не во втором массиве, а в первом массиве.

[
  {
    "path": ".TemporaryItems",
    "label": ".TemporaryItems",
    "rec": false
  },
  {
    "path": "1",
    "label": "1",
    "rec": false
  },
  {
    "path": "test/",
    "label": "test",
    "rec": true,
    "subDirectories": [
      {
        "name": "daamn",
        "isDir": true,
        "isEmpty": false
      },
      {
        "name": "New folder",
        "isDir": true,
        "isEmpty": true
      },
      {
        "name": "New folder (2)",
        "isDir": true,
        "isEmpty": true
      },
      {
        "name": "New folder (3)",
        "isDir": true,
        "isEmpty": true
      },
      {
        "name": "New folder (4)",
        "isDir": true,
        "isEmpty": true
      },
      {
        "name": "New folder (5)",
        "isDir": true,
        "isEmpty": true
      }
    ]
  },
  {
    "path": "test/daamn/",
    "label": "daamn",
    "rec": true,
    "subDirectories": [
      {
        "name": "anotherone",
        "isDir": true,
        "isEmpty": false
      }
    ]
  },
  {
    "path": "test/daamn/anotherone/",
    "label": "anotherone",
    "rec": true,
    "subDirectories": [
      {
        "name": "vade",
        "isDir": true,
        "isEmpty": true
      }
    ]
  },
  {
    "path": "test/daamn/anotherone/vade",
    "label": "vade",
    "rec": false
  },
  {
    "path": "test/New folder",
    "label": "New folder",
    "rec": false
  },
  {
    "path": "test/New folder (2)",
    "label": "New folder (2)",
    "rec": false
  },
  {
    "path": "test/New folder (3)",
    "label": "New folder (3)",
    "rec": false
  },
  {
    "path": "test/New folder (4)",
    "label": "New folder (4)",
    "rec": false
  },
  {
    "path": "test/New folder (5)",
    "label": "New folder (5)",
    "rec": false
  }
]

Флаг «rec» означает, что есть другие подпапки или нет.

Как и ожидалось, мне нужен DOM (на самом деле просто список с <ul> и <li>). Как-то так, извините за краску Сделать древовидное представление из данных

Итак, каков ваш ожидаемый результат?

— 20.03.2019 08:48

@bird забыл добавить, простите, один момент, пожалуйста

— 20.03.2019 08:48

jsTree?

— 20.03.2019 08:50

@ClydeFrog изменил описание

— 20.03.2019 08:54

@bird просто список <ul> и <li>

— 20.03.2019 08:54

может это поможет вам embed.plnkr.co/4H0hIL

— 20.03.2019 08:55

вы пробовали реагировать-UI-дерево. вот ссылка на демо pqx.github.io/react-ui-дерево. Если это ваш желаемый результат, в противном случае вы можете поделиться более подробной информацией.

— 20.03.2019 09:00

@MuhammadAbdullahShafiq выглядит так, как я искал, но я не уверен, что строка может быть настраиваемым компонентом React.

— 20.03.2019 09:06

@AlexPark, я думаю, вы можете, передав функцию, возвращающую пользовательский элемент React, в renderNode.

— 20.03.2019 09:19

javascript html reactjs

20.03.2019 08:43

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я нашел дерево реакции пользовательского интерфейса, в котором вы можете вызвать renderNode, чтобы отобразить пользовательский элемент React.

<Tree
 paddingLeft = {20}              // left padding for children nodes in pixels
 tree = {this.state.tree}        // tree object
 onChange = {this.handleChangeEvent}  // onChange(tree) tree object changed
 renderNode = {this.renderNode}  // renderNode(node) return react element
/>

20.03.2019 09:18

Ответ принят как подходящий

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

const arr = [
  {
    "path": ".TemporaryItems",
    "label": ".TemporaryItems",
    "rec": false
  },
  {
    "path": "1",
    "label": "1",
    "rec": false
  },
  {
    "path": "test/",
    "label": "test",
    "rec": true,
    "subDirectories": [
      {
        "name": "daamn",
        "isDir": true,
        "isEmpty": false
      },
      {
        "name": "New folder",
        "isDir": true,
        "isEmpty": true
      },
      {
        "name": "New folder (2)",
        "isDir": true,
        "isEmpty": true
      },
      {
        "name": "New folder (3)",
        "isDir": true,
        "isEmpty": true
      },
      {
        "name": "New folder (4)",
        "isDir": true,
        "isEmpty": true
      },
      {
        "name": "New folder (5)",
        "isDir": true,
        "isEmpty": true
      }
    ]
  },
  {
    "path": "test/daamn/",
    "label": "daamn",
    "rec": true,
    "subDirectories": [
      {
        "name": "anotherone",
        "isDir": true,
        "isEmpty": false
      }
    ]
  },
  {
    "path": "test/daamn/anotherone/",
    "label": "anotherone",
    "rec": true,
    "subDirectories": [
      {
        "name": "vade",
        "isDir": true,
        "isEmpty": true
      }
    ]
  },
  {
    "path": "test/daamn/anotherone/vade",
    "label": "vade",
    "rec": false
  },
  {
    "path": "test/New folder",
    "label": "New folder",
    "rec": false
  },
  {
    "path": "test/New folder (2)",
    "label": "New folder (2)",
    "rec": false
  },
  {
    "path": "test/New folder (3)",
    "label": "New folder (3)",
    "rec": false
  },
  {
    "path": "test/New folder (4)",
    "label": "New folder (4)",
    "rec": false
  },
  {
    "path": "test/New folder (5)",
    "label": "New folder (5)",
    "rec": false
  }
]

const folrLvl = str => str.split('/').filter(e => e !== "").length

function recursion(lvl = 1, path) {
    const rs = [] 
    const matched = arr.filter(e => 
      folrLvl(e.path) === lvl && (!path || e.path.indexOf(path) === 0))
    matched.forEach(ee => {
      const { path, rec, label } = ee
      if (!rec) rs.push(ee)
      else rs.push({path, label, rec, children: recursion(lvl + 1, path)})
    })
    return rs
}

const rs = recursion()
console.info(rs)

20.03.2019 10:11

Другие вопросы по теме

Как установить функцию setInterval для обновления окна сообщения?

Django — назначение внешнего ключа при отправке формы

Как установить высоту элемента сетки в качестве остального пространства

Поле форм, управляемых шаблоном Angular, считается недействительным, хотя регулярное выражение совпадает

Как решить: "элемент div не может быть вложен в элемент updatepanel"

Базовый сценарий входа PHP не будет входить в систему

Попытка показать текст с помощью JavaScript и HTML/CSS

Как добавить значения флажков, которые были проверены?

Клавиша доступа к HTML (alt+s) не работает в CK Editor

Как сохранить нижний колонтитул внизу, пока содержимое не будет заполнено высотой тела?

Сделать древовидное представление из данных

Ответы 2

Другие вопросы по теме

Похожие вопросы