如果菜单名称包含在允许的菜单字符串数组中，则过滤深层嵌套菜单数组

Question

您好，我正在尝试将此菜单过滤为允许的菜单我的菜单结构如下：

 const routes = [
    {
      path: '/dashboard',
      name: 'dashboard',
      children: [
        {
          path: '/style-guide',
          name: 'style_guide',
        },
      ],
    },
    {
      path: '/tables-management',
      name: 'tables_management',
      children: [
        {
          path: '/auxiliary',
          name: 'auxiliary',
          children: [
            {
              path: '/reporting-code',
              name: 'reporting_code',
            },
            {
              path: '/budget-levels',
              name: 'budget_levels',
            },
            {
              path: '/qr-codes',
              name: 'qr_codes',
            },
            {
              path: '/error-code',
              name: 'error_code',
            },
          ],
        },
    },
  ];

这是允许的路线

const pages= ["style_guide", "reporting_code", "qr_codes"]

我想过滤包含在页面数组中的路由而不隐藏 parent 路由如果有任何 children

所以结果应该显示仪表板路线，因为 style_guide 是可见的 child

我正在尝试这样做，但它的回报比预期的要多

const filter = (arr => {
    return arr.filter(obj => {
      if (obj.children && obj.children.length) {
        return filter(obj.children);
      }

      return !!(obj.name && pages.includes(obj.name));

    });
  });

我错过了什么？什么是最好的实施方式无论如何传播运营商？

谢谢

Answer 1

您需要减少数组，因为 filter 不会更改子数组。

对于不改变数据的方法，您需要创建新对象。

const
    getAllowed = (routes, pages) => routes.reduce((r, o) => {
        if (pages.includes(o.name)) {
            r.push(o);
        } else if (o.children) {
            let children = getAllowed(o.children, pages);
            if (children.length) r.push({ ...o, children });
        }
        return r;
    }, []),
    routes = [{ path: '/dashboard', name: 'dashboard', children: [{ path: '/style-guide', name: 'style_guide' }] }, { path: '/tables-management', name: 'tables_management', children: [{ path: '/auxiliary', name: 'auxiliary', children: [{ path: '/reporting-code', name: 'reporting_code' }, { path: '/budget-levels', name: 'budget_levels' }, { path: '/qr-codes', name: 'qr_codes' }, { path: '/error-code', name: 'error_code' }] }] }],
    pages = ["style_guide", "reporting_code", "qr_codes"],
    result = getAllowed(routes, pages);

console.log(result);

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

如果菜单名称包含在允许的菜单字符串数组中，则过滤深层嵌套菜单数组

Filter deep nested menu array if menu name includes in allowed menu string array

javascript

arrays

menu

filter