How can I get hierarchy based name from nested array objects?

Question

I have an array of objects and want to get data from child to parent by their respected name like, if we have an array with multiple objects then I want:

• Home
• Home >> About
• Home >> Blog
• Home >> Services
• Home >> Services >> React
• Home >> Services >> PHP
• Home >> Services >> PHP >> Cake
• Home >> Services >> PHP >> Cake >> V7
• Home >> Services >> PHP >> Laravel
• Home >> Services >> AIML
• Home >> Services >> ROR
• Home >> Contact us

Here is code:

[{
    "id": "5e27f3ded2e5e90001b4b989",
    "title": "Home",
    "children": [{
        "id": "5e27f3dfd2e5e90001b4b993",
        "title": "About Us",
        "children": []
      },
      {
        "id": "5e27f3dfd2e5e90001b4b996",
        "title": "Contact Us",
        "children": []
      },
      {
        "id": "5e574a55b4895e0001313670",
        "title": "Services",
        "children": [{
            "id": "5e574a63b4895e0001313677",
            "title": "php",
            "children": [{
                "id": "5e574a8ab4895e000131368d",
                "title": "Cake php",
                "children": [{
                  "id": "5e574ad1b4895e000131369c",
                  "title": "version 7",
                  "children": []
                }]
              },
              {
                "id": "5e574aa2b4895e0001313695",
                "title": "CodeIgniter",
                "children": []
              }
            ]
          },
          {
            "id": "5e574a70b4895e000131367f",
            "title": "React",
            "children": []
          },
          {
            "id": "5e574a7ab4895e0001313686",
            "title": "Ruby on Rails",
            "children": []
          }
        ]
      }
    ]
  },
  {
    "id": "",
    "title": "Orphan",
    "children": [{
      "id": "5e54a3dd7924a50001df0bd3",
      "title": "New Page",
      "children": []
    }]
  }
]

In response I want the data in an array of objects like below:

[{
    label: '5e27f3ded2e5e90001b4b989',
    value: 'Home'
  },
  {
    label: '5e27f3dfd2e5e90001b4b993',
    value: 'Home >> About Us"'
  },
  {
    label: '5e27f3dfd2e5e90001b4b996',
    value: 'Home >> Contact Us'
  },
  {
    label: '5e574a55b4895e0001313670',
    value: 'Home >> Services'
  },
  {
    label: '5e574a63b4895e0001313677',
    value: 'Home >> Services >> php '
  },
  {
    label: '5e574a8ab4895e000131368d',
    value: 'Home >> Services >> php >> Cake php '
  },
  {
    label: '5e574ad1b4895e000131369c',
    value: 'Home >> Services >> php >> Cake php >> version 7'
  },
  {
    label: '5e574aa2b4895e0001313695',
    value: 'Home >> Services >> php >> CodeIgniter'
  },
  {
    label: '5e574a70b4895e000131367f',
    value: 'Home >> Services >> React'
  },
  {
    label: '5e574a7ab4895e0001313686',
    value: 'Home >> Services >> Ruby on Rails'
  },
  {
    label: '5e27f3ded2e5e91458745412',
    value: 'Orphan'
  },
  {
    label: '5e54a3dd7924a50001df0bd3',
    value: 'Orphan >> New Page'
  },
];

Answer 1

You can use simple recursion for that, and just accumulate the name into a string every function call and pass the children if there exists

    const data = [{
        "id": "5e27f3ded2e5e90001b4b989",
        "title": "Home",
        "children": [{
            "id": "5e27f3dfd2e5e90001b4b993",
            "title": "About Us",
            "children": []
          },
          {
            "id": "5e27f3dfd2e5e90001b4b996",
            "title": "Contact Us",
            "children": []
          },
          {
            "id": "5e574a55b4895e0001313670",
            "title": "Services",
            "children": [{
                "id": "5e574a63b4895e0001313677",
                "title": "php",
                "children": [{
                    "id": "5e574a8ab4895e000131368d",
                    "title": "Cake php",
                    "children": [{
                      "id": "5e574ad1b4895e000131369c",
                      "title": "version 7",
                      "children": []
                    }]
                  },
                  {
                    "id": "5e574aa2b4895e0001313695",
                    "title": "CodeIgniter",
                    "children": []
                  }
                ]
              },
              {
                "id": "5e574a70b4895e000131367f",
                "title": "React",
                "children": []
              },
              {
                "id": "5e574a7ab4895e0001313686",
                "title": "Ruby on Rails",
                "children": []
              }
            ]
          }
        ]
      },
      {
        "id": "",
        "title": "Orphan",
        "children": [{
          "id": "5e54a3dd7924a50001df0bd3",
          "title": "New Page",
          "children": []
        }]
      }
    ];

    const array = [];
    
    mapParent(data, '');
    console.log(array);

    function mapParent(data, name) {
        
      data.forEach(d => {
        array.push({
          id: d.id,
          label: name + d.title
        });
        if (d.children.length) {
          mapParent(d.children, name + d.title + ' >> ')
        }
      })
    };