logo标签列表

基于值过滤 JavaScript 嵌套数组中的对象

javascriptarraysfiltering
4

我有一个菜单结构如下：

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

问题是，我无法过滤嵌套数组，即子级和孙级。非常感谢任何帮助 :)
首先，使用 some() 或 every() 代替 filter().length。另外，我相信你要找的是 menu_item.slug.indexOf(slug) == 0（而不是 >= 0），或者是 menu_item.slug.startsWith(slug)。 - Bergi
为什么仪表板没有缩进？ - Nina Scholz
@NinaScholz 那只是结构。我想要添加一些动态结构。 - MyWebDev
@Bergi，这仍然无法解决嵌套过滤问题。我已经尝试了一天以上，结合多个数组原型函数。 - MyWebDev
@NinaScholz，实际上，它非常类似于您在 https://dev59.com/faTia4cB1Zd3GeqP7QVg#45482594 中的答案。只是结构更加嵌套。 - MyWebDev
@MyWebDev 下面的答案展示了如何使用递归函数和map来实现。我的评论只是一个额外的建议。 - Bergi
3个回答
5
您可以检查一个名为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; }

感谢您的答案。它确实有效，但不完全。就像 @JonasWilms 的回答一样。它会在每个菜单中创建一个空的子数组，这会破坏我的样式设计。 - MyWebDev
聪明地使用 Object.assign ;) - ElChiniNet
4

尝试使用此函数，看看是否适合您的需求。它基本上使用递归的reduce函数创建一个新数组，并检查每个元素是否符合 slug 数组的标准：

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' } ] } ], }, ]; const allowed_slug = [ '/dashboard/user-dashboard', '/inventory/add-inventory', '/membership/program-b/view', '/membership/program-b/add' ];

const filterMenu = (menu, allowed) =>
    menu.reduce((a, {title, link, slug, children = []}) =>
        (children = filterMenu(children, allowed), (children.length && (a = [...a, {title, slug, children}])) || (allowed.includes(slug) && (a = [...a, {title, link, slug}])), a), []);

console.log(filterMenu(menu, allowed_slug));

函数的更易读版本：

const filterMenu = (menu, allowed) =>
    menu.reduce((array, {title, link, slug, children = []}) => {
        children = filterMenu(children, allowed);
        if (children.length) {
            array.push({title, slug, children});
        } else if (allowed.includes(slug)) {
            array.push({title, link, slug});
        }
        return array;
    }, []);
3

在这里，递归是你的好朋友：

 // smae signature as your function
 const filterMenu = (menus, allowed) => menus
    // first of all, copy & filter recursively
   .map(({ title, slug, link, children }) => ({ title, slug, link, children: children && filterMenu(children, allowed) }))
   // then remove all that don't have allowed children and are not allowed themself
   .filter(it => it.children && it.children.length || allowed.includes(it.slug));
1
只需在 filterMenu 函数中删除一个多余的括号。这个 filterMenu(children), allowed) 应该是 filterMenu(children, allowed)。 - ElChiniNet
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接