Отфильтровать массив глубоко вложенного меню, если имя меню входит в разрешенный массив строк меню

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"]

, и я хочу отфильтровать маршруты, которые входят в массив страниц, не скрывая родительский маршрут, если есть дочерние элементы

, поэтому результаты должны отображать маршрут панели мониторинга, поскольку style_guide является видимым дочерним элементом

Я пытался это сделать но он возвращает больше, чем ожидалось

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; }