JS recursive function with nested children array

Question

i have tree array of nested objects. Depending on the type of element I want to give it the necessary icon.

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

Unlimited number of nesting possible in folders. Output should be like that.

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"
              },
            ]
 }
]

As i understand i should use recursive map function with CHILDREN check. But i can't reach the proper result.

in output the second element of children should have a property icon : folder-icon not icon: file-icon — Code Maniac
– Code Maniac, Commented Apr 29, 2020 at 11:51

Nenad Vracar · Accepted Answer · 2020-04-29 11:42:40Z

5

You could use map method and create a recursive function that will take type and convert it lowercase to create icon name and add it to the new object.

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))

answered Apr 29, 2020 at 11:42

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Max Buinevich Over a year ago

Works! Ty so much)

Daniel Herrero Hernando · Accepted Answer · 2020-04-29 11:46:57Z

1

You can create a function like this:

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

And then map your tree like this treeData.map(child=>iconCalculator(child))

answered Apr 29, 2020 at 11:46

Daniel Herrero Hernando

3122 silver badges7 bronze badges

Comments

Nina Scholz · Accepted Answer · 2020-04-29 11:43:01Z

0

You could map by using a new object with recursive children.

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; }

answered Apr 29, 2020 at 11:43

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Comments

Code Maniac · Accepted Answer · 2020-04-29 11:46:41Z

0

You can use forEach method something like this

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)

P.S:- This mutates original array if you don't want you can make a copy every time and return the newly created copy

answered Apr 29, 2020 at 11:46

Code Maniac

37.9k5 gold badges44 silver badges65 bronze badges

Collectives™ on Stack Overflow

JS recursive function with nested children array

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related