javascript - 根据其值过滤 JavaScript 深度嵌套的对象数组

Question

我的菜单结构如下:

const menu = [
  {
    title: 'Supervisor Dashboard',
    link: '/dashboard/supervisor-dashboard',
    slug: '/dashboard/supervisor-dashboard'
  },
  {
    title: 'User Dashboard',
    link: '/dashboard/user-dashboard',
    slug: '/dashboard/user-dashboard'
  },
  {
    title: 'Inventory',
    slug: '/inventory',
    children: [
      {
        title: 'Add Inventory',
        link: '/inventory/add-inventory',
        slug: '/inventory/add-inventory'
      },
      {
        title: 'Remove Inventory',
        link: '/inventory/remove-inventory',
        slug: '/inventory/remove-inventory'
      },
    ]
  },
  {
    title: 'Membership',
    slug: '/membership',
    children: [
      {
        title: 'Program A',
        slug: '/membership/program-a',
        children: [
          {
            title: 'View Membership',
            link: '/membership/program-a/view',
            slug: '/membership/program-a/view'
          },
          {
            title: 'Add Membership',
            link: '/membership/program-a/add',
            slug: '/membership/program-a/add'
          },
          {
            title: 'Delete Membership',
            link: '/membership/program-a/delete',
            slug: '/membership/program-a/delete'
          }
        ]
      },
      {
        title: 'Program B',
        slug: '/membership/program-b',
        children: [
          {
            title: 'View Membership',
            link: '/membership/program-b/view',
            slug: '/membership/program-b/view'
          },
          {
            title: 'Add Membership',
            link: '/membership/program-b/add',
            slug: '/membership/program-b/add'
          },
          {
            title: 'Delete Membership',
            link: '/membership/program-b/delete',
            slug: '/membership/program-b/delete'
          }
        ]
      }
    ],
  },
];

我想过滤菜单，即只显示授予用户的内容。用户只能查看基于允许的 slug 的菜单，如下所示:

const allowed_slug = [
  '/dashboard/user-dashboard',
  '/inventory/add-inventory',
  '/membership/program-b/view',
  '/membership/program-b/add'
];

使用 .filter 我可以过滤数组的第一层。这是我到目前为止取得的成就:

function filterMenu(menus, allowed_slug) {
  const result = menus.filter(function (menu_item) {
    return allowed_slug.filter(function(slug) {
      return menu_item.slug.indexOf(slug) > -1;
    }).length;
  });

  return result;
}

理想的输出应该是这样的:

o
|-- User Dashboard
|-- Inventory
|   `-- Add Inventory
`-- Membership
    `-- Program B
        |-- View Membership
        `-- Add Membership

问题是，我无法过滤嵌套数组，即子项和子项的子项。很感谢任何形式的帮助。 :)

Answer 1

您可以检查一个 allowdSlug 是否以实际对象的 slug 开头。

var menus = [{ title: 'Supervisor Dashboard', link: '/dashboard/supervisor-dashboard', slug: '/dashboard/supervisor-dashboard' }, { title: 'User Dashboard', link: '/dashboard/user-dashboard', slug: '/dashboard/user-dashboard' }, { title: 'Inventory', slug: '/inventory', children: [{ title: 'Add Inventory', link: '/inventory/add-inventory', slug: '/inventory/add-inventory' }, { title: 'Remove Inventory', link: '/inventory/remove-inventory', slug: '/inventory/remove-inventory' }] }, { title: 'Membership', slug: '/membership', children: [{ title: 'Program A', slug: '/membership/program-a', children: [{ title: 'View Membership', link: '/membership/program-a/view', slug: '/membership/program-a/view' }, { title: 'Add Membership', link: '/membership/program-a/add', slug: '/membership/program-a/add' }, { title: 'Delete Membership', link: '/membership/program-a/delete', slug: '/membership/program-a/delete' }] }, { title: 'Program B', slug: '/membership/program-b', children: [{ title: 'View Membership', link: '/membership/program-b/view', slug: '/membership/program-b/view' }, { title: 'Add Membership', link: '/membership/program-b/add', slug: '/membership/program-b/add' }, { title: 'Delete Membership', link: '/membership/program-b/delete', slug: '/membership/program-b/delete' }] }] }], allowed_slug = ['/dashboard/user-dashboard', '/inventory/add-inventory', '/membership/program-b/view', '/membership/program-b/add'],
    filter = menus => menus
        .filter(({ slug }) => allowed_slug.some(s => s.startsWith(slug)))
        .map(({ title, slug, children = [] }) => {
            children = filter(children);
            return Object.assign({ title, slug }, children.length && { children })
        }),
    result = filter(menus);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }