Return a folder-like path from an array of nested object

Question

I've an array of nested objects. They represent a folder-like path or a menu with sub-navigation.

The structure is like it follows:

const MENU:Menu[] = [
  {
    value: 'Home',
    nested: [
      { value: 'home-1', url: 'home-1' },
      { value: 'home-2', url: 'home-2' },
    ],
  },

  {
    value: 'about',
    nested: [
      {
        value: 'about-1',
        url: 'about-1',
      },
      {
        value: 'about-2',
        url: 'about-2',
      },
    ],
  },
];

I want that for a given url to return the path using the value property.

For example, for home-1 => ['Home','home-1']

for about-2 => ['about','about-2']

The interface for this Menu is

interface Menu {
  value: string;
  nested?: Menu[];
  url?: string;
}

This is what I tried

function getPath(url, menu = MENU, navTreePath = []) {
  for (let i = 0; i < menu.length; i++) {
    const currentMenu = menu[i];

    if (currentMenu.url === url) {
      navTreePath.push(currentMenu.value);
      return navTreePath;
    } else if (currentMenu.nested) {
      navTreePath.push(currentMenu.value);
      return getNavTreePathFromUrl(url, currentMenu.nested, []);
    } else {
    }
  }
}

And the call

const path = getPath('about-2');

Yevhen Horbunkov · Accepted Answer · 2020-09-29 07:14:04Z

1

You would need recursive algorithm to crawl entire depth through:

const menu = [
  {
    value: 'Home',
    nested: [
      { value: 'home-1', url: 'home-1' },
      { value: 'home-2', url: 'home-2' },
    ],
  },

  {
    value: 'about',
    nested: [
      {
        value: 'about-1',
        url: 'about-1',
      },
      {
        value: 'about-2',
        url: 'about-2',
        nested: [
          {
            value: 'detailed about',
            url: 'detailedAbout'
          }
        ]
      },
    ],
  },
],
      
      getPath = (tree, needle, path=[]) => 
        tree.reduce((acc, {url, value, nested=[]}) => {
          if(url == needle){
            acc.push(...path, value)
          } else if (!!nested.length) {
            acc.push(...getPath(nested, needle, [...path, value]))
          }
          return acc
        }, [])

console.log(getPath(menu, 'detailedAbout'))

answered Sep 29, 2020 at 7:14

Yevhen Horbunkov

15.6k3 gold badges27 silver badges46 bronze badges

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

5 Comments

undefined Over a year ago

Thank you. No need for that double !!. Right?

Yevhen Horbunkov Over a year ago

@GeorgianStan : Sorry, I didn't get the question. What did you mean by '..No need for that double' ?

undefined Over a year ago

**else if (!!nested.length) {} ** -here

Yevhen Horbunkov Over a year ago

@GeorgianStan : I just wasn't sure whether 0 will be casted smoothly to boolean in typescript environment (since I used plain JS), so it seemed to me a bit more safe

undefined Over a year ago

Yes it the same, Truthy and Falsy values are considered as well. Anyway it works. Thank you :)

Collectives™ on Stack Overflow

Return a folder-like path from an array of nested object

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related