I have a data that needs to be recursive but I don't know how to implement it. Here is my data.

All I need to do is to look like this.

[
      {
        id: 1,
        label: 'Satisfied customers',
        children: [
          {
            id: 2,
            label: 'Good food',
            icon: 'restaurant_menu',
            children: [

              { id: 3, label: 'Quality ingredients'},
              { id: 4, label: 'Good recipe' }
            ]
          },
          {
            id: 5,
            label: 'Good service',
            icon: 'room_service',
            children: [
              { id: 6, label: 'Prompt attention' },
              { id: 7, label: 'Professional waiter' }
            ]
          },
          {
            id: 8,
            label: 'Pleasant surroundings',
            icon: 'photo',
            children: [
              {
                id: 9,
                label: 'Happy atmosphere (not tickable)',
                tickable: false,
              },
              {
                id: 10,
                label: 'Good table presentation (disabled node)',
                disabled: true,
              },
              {
                id: 11,
                label: 'Pleasing decor',
              }
            ]
          },
          {
            id: 12,
            label: 'Extra information (has no tick)',
            noTick: true,
            icon: 'photo'
          },
          {
            id: 13,
            label: 'Forced tick strategy (to "strict" in this case)',
            tickStrategy: 'strict',
            icon: 'school',
            children: [
              {
                id: 14,
                label: 'Happy atmosphere',
              },
              {
                id: 15,
                label: 'Good table presentation',
              },
              {
                id: 16,
                label: 'Very pleasing decor',
              }
            ]
          }
        ]
      }
    ]

My code doesn't works... it's just a map without any recursion.

categories.map(e => {
        console.log(e.all_children)
        return {
          id: e.id,
          label: e.name,
          children: _.values(e).map(v => {
              return { id: v.id, label: e.name }
          })
        }
      })

I don't really know how to do it. If you have any idea on how to do it please help me. I've been searching how to do it using lodash but I can't find any relevant code. I'm not very good in javascript.

I have a data that needs to be recursive but I don't know how to implement it. Here is my data.

All I need to do is to look like this.

[
      {
        id: 1,
        label: 'Satisfied customers',
        children: [
          {
            id: 2,
            label: 'Good food',
            icon: 'restaurant_menu',
            children: [

              { id: 3, label: 'Quality ingredients'},
              { id: 4, label: 'Good recipe' }
            ]
          },
          {
            id: 5,
            label: 'Good service',
            icon: 'room_service',
            children: [
              { id: 6, label: 'Prompt attention' },
              { id: 7, label: 'Professional waiter' }
            ]
          },
          {
            id: 8,
            label: 'Pleasant surroundings',
            icon: 'photo',
            children: [
              {
                id: 9,
                label: 'Happy atmosphere (not tickable)',
                tickable: false,
              },
              {
                id: 10,
                label: 'Good table presentation (disabled node)',
                disabled: true,
              },
              {
                id: 11,
                label: 'Pleasing decor',
              }
            ]
          },
          {
            id: 12,
            label: 'Extra information (has no tick)',
            noTick: true,
            icon: 'photo'
          },
          {
            id: 13,
            label: 'Forced tick strategy (to "strict" in this case)',
            tickStrategy: 'strict',
            icon: 'school',
            children: [
              {
                id: 14,
                label: 'Happy atmosphere',
              },
              {
                id: 15,
                label: 'Good table presentation',
              },
              {
                id: 16,
                label: 'Very pleasing decor',
              }
            ]
          }
        ]
      }
    ]

My code doesn't works... it's just a map without any recursion.

categories.map(e => {
        console.log(e.all_children)
        return {
          id: e.id,
          label: e.name,
          children: _.values(e).map(v => {
              return { id: v.id, label: e.name }
          })
        }
      })

I don't really know how to do it. If you have any idea on how to do it please help me. I've been searching how to do it using lodash but I can't find any relevant code. I'm not very good in javascript.

• javascript
• lodash

Share Improve this question Follow asked Dec 5, 2018 at 7:27 RbexRbex 1,53966 gold badges2525 silver badges5151 bronze badges 1

• 2 Can you post your input data as text, not an image, so that we can try to work with it? See Why not upload images of code on SO when asking a question? – CertainPerformance Commented Dec 5, 2018 at 7:27

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You need to specify a function for later mapping inside of the callback.

const
    map = e => ({
        id: e.id,
        label: e.name,
        children: e.all_children.map(map) // recursive call
    }),
    tree = categories.map(map);

To get all properties without all_children, you could take rest parameters ... for properties and separate just the children property for recursive mapping.

const
    map = ({ all_children = [], ...o }) => ({
        ...o,
        children: all_children.map(map) // recursive call
    }),
    tree = categories.map(map);