JS match key value in array containing nested objects and nested arrays

Question

I need an efficient function to extract the index and the position of an argument in an array - but the array is could be complex.

This is the array:

let root_menu = {
        nav_title: $rootScope.t['General administration'],
        items: [
          { // overview
            title: $rootScope.t['Overview'],
            path: `/root/overview`,
            module: "overview/menu",
            icon: "fa fa-home"
          }, // overview
          { // cardboards
            title: $rootScope.t['Cardboards'],
            path: `/root/cardboards`,
            module: "cardboards/menu",
            icon: "fa fa-files-o",
            subs: [
              {
                title: $rootScope.t['Suppliers'],
                path: `/root/cardboards/suppliers`,
                module: "suppliers/menu",
                icon: "fa fa-handshake-o"
              },
              {
                title: $rootScope.t['Employees'],
                path: `/root/cardboards/employees`,
                module: "employees/menu",
                icon: "fa fa-address-book-o"
              },
            ]
          }, // cardboards
          { // charts
            title: $rootScope.t['Charts'],
            path: `/root/charts`,
            icon: "fa fa-area-chart",
            module: "charts/menu",
            subs: [
              {
                title: $rootScope.t['Activity'],
                path: `/root/charts/activity`,
                module: "charts/activity/menu"
              },
            ]
          }, // charts
          { // settings
            title: $rootScope.t['Settings'],
            path: `/root/settings`,
            module: "settings/menu",
            icon: "fa fa-cogs",
            subs: [
              {
                title: $rootScope.t['Permissions'],
                path: `/root/settings/permissions`,
                module: "settings/permissions/menu",
                icon: "fa fa-file-text-o"
              }
            ]
          } // settings
        ]
      };

Now I have this breadcrumb array:

["/", "/root", "/root/cardboards", "/root/cardoards/employees", "/root/cardboards/employees/123"]

And I want to match each key (if any) in the breadcrumbs array to the first array, so I can have something like this:

[
 {path: "/root/cardboards/", title: "the title from the first 
 array"},
 {path: "/root/cardboards/employees", title: "the title from the . 
 first array"}
]

As you can see, if there is no match between the second and the first array (under path key), there should not be attachment to the new array.

How can I do this efficiently - better with ES6.

You can take a look at my solution to a very similar question or the other answers on this question for a reference. After looking at that you should be able to get this working. — Adam H
– Adam H, Commented Nov 9, 2018 at 21:45
Please show what you have tried. Stackoverflow isn't a free code writing service. Do some research into recursive tree walking functions — charlietfl
– charlietfl, Commented Nov 9, 2018 at 21:55

slider · Accepted Answer · 2018-11-09 22:18:16Z

One solution can be to create a mapping from path to its object. But to do that, you need to travel your items array recursively. Once you have that index/mapping, you can get the title of the path easily by accessing the value of that path key in the mapping:

let items = [{ // overview
    title: 'Overview',
    path: `/root/overview`,
    module: "overview/menu",
    icon: "fa fa-home"
  }, // overview
  { // cardboards
    title: 'Cardboards',
    path: `/root/cardboards`,
    module: "cardboards/menu",
    icon: "fa fa-files-o",
    subs: [{
        title: 'Suppliers',
        path: `/root/cardboards/suppliers`,
        module: "suppliers/menu",
        icon: "fa fa-handshake-o"
      },
      {
        title: 'Employees',
        path: `/root/cardboards/employees`,
        module: "employees/menu",
        icon: "fa fa-address-book-o"
      },
    ]
  }, // cardboards
  { // charts
    title: 'Charts',
    path: `/root/charts`,
    icon: "fa fa-area-chart",
    module: "charts/menu",
    subs: [{
      title: 'Activity',
      path: `/root/charts/activity`,
      module: "charts/activity/menu"
    }, ]
  }, // charts
  { // settings
    title: 'Settings',
    path: `/root/settings`,
    module: "settings/menu",
    icon: "fa fa-cogs",
    subs: [{
      title: 'Permissions',
      path: `/root/settings/permissions`,
      module: "settings/permissions/menu",
      icon: "fa fa-file-text-o"
    }]
  } // settings
];


function flatten(tree) {
  let res = [];
  function traverse(arr) {
    res.push(...arr);
    arr.forEach(o => traverse(o.subs || []));
  }
  traverse(tree);
  return res;
}

let pathIndex = flatten(items).reduce((acc, curr) => {
  if (curr.path) acc[curr.path] = curr;
  return acc;
}, {});

let breadcrumbs = ["/", "/root", "/root/cardboards", "/root/cardboards/employees", "/root/cardboards/employees/123"];
console.log(breadcrumbs.filter(path => path in pathIndex)
                       .map(path => ({title: pathIndex[path].title, path})));

Collectives™ on Stack Overflow

JS match key value in array containing nested objects and nested arrays

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related