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.

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.

• javascript
• arrays
• object

Share Improve this question Follow asked Apr 29, 2020 at 11:36 Max BuinevichMax Buinevich 13744 silver badges99 bronze badges 1

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

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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))

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

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

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