JS рекурсивная функция с вложенным дочерним массивом

Question

у меня есть массив деревьев вложенных объектов. В зависимости от типа элемента я хочу дать ему необходимый значок.

const treeData = [
 {
  id: 1,
  type: "FOLDER",
  children: [
              {
                id: 2,
                type: "FILE"
              },
              {
                id: 2,
                type: "FOLDER",
                children: []
              },
            ]
 }
]

В папках возможно неограниченное количество вложений. Вывод должен быть таким.

const treeData = [
 {
  id: 1,
  type: "FOLDER",
  icon: "folder-icon"
  children: [
              {
                id: 2,
                type: "FILE",
                icon: "file-icon"
              },
              {
                id: 2,
                type: "FOLDER",
                children: []
                icon: "file-icon"
              },
            ]
 }
]

Как я понимаю, я должен использовать функцию рекурсивной карты с проверкой ДЕТЕЙ. Но я не могу достичь правильного результата.

Answer 1

Вы можете использовать метод map и создать рекурсивную функцию, которая будет принимать тип и преобразовывать его в нижний регистр, чтобы создать имя значка и добавить его в новый объект.

const data = [{"id":1,"type":"FOLDER","children":[{"id":2,"type":"FILE"},{"id":2,"type":"FOLDER","children":[]}]}]

function addIcons(data) {
  return data.map(({ type, children = [], ...rest }) => {
    const o = { ...rest, type }
    if(type) o.icon = `${type.toLowerCase()}-icon`;
    if (children.length)  o.children = addIcons(children)
    return o
  })
}

console.log(addIcons(data))

Answer 2

Вы можете создать функцию, подобную этой:

const iconCalculator = object => {
  if (object.children) object.children = object.children.map(child=>iconCalculator(child))
  return {...object, icon: 'whatever'}
}

И затем отобразить свое дерево следующим образом treeData.map(child=>iconCalculator(child))

Answer 3

Вы можете использовать метод forEach как этот

const treeData = [{id: 1,type: "FOLDER",children: [{id: 2,type: "FILE"},{id: 2,type: "FOLDER",children: []},]}]

function addIcon(data) {
  if (Array.isArray(data)) {
    data.forEach(value => {
      value.icon = value.type.toLowerCase() + '-icon'
      if (Array.isArray(value.children)) {
        addIcon(value.children)
      }
    })
  }
}

addIcon(treeData)
console.log(treeData)

PS: - Это мутирует исходный массив, если вы не хотите, вы можете каждый раз делать копию и возвращать только что созданную копию

Answer 4

Вы можете отобразить, используя новый объект с рекурсивными дочерними элементами.

const
    addIcon = o => ({
        ...o,
        icon: `${o.type.toLowerCase()}-icon`,
        ...(Array.isArray(o.children)
            ? { children: o.children.map(addIcon) }
            : {}
        )
    }),
    treeData = [{ id: 1, type: "FOLDER", children: [{ id: 2, type: "FILE" }, { id: 2, type: "FOLDER", children: [] }] }],
    result = treeData.map(addIcon);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }