javascript - JS 从对象数组中过滤某些部分

Question

我有这个数组。

const routes = [
{
    path:'/dashboard',
    text: "Dashboard"
},
{
    path:'/disputes',
    text: "Disputes"
},
{
    children: [
        {
          text: "Create Suburb",
          path: "/create-suburb"
        },
        {
          text: "View and Update Suburb",
          path: "/view-suburb"
        }
      ]
},
{
    children: [
        {
          text: "Create user",
          path: "/create-user"
        },
        {
          text: "View and Update users",
          path: "/view-users"
        }
      ]
}

]

我有这个数组

const permissions = ['/dashboard','/view-suburb'];

我想要的是从数组中过滤掉 permissions 数组中没有的对象。

我的预期输出是这样的

const routes = [
    {
        path:'/dashboard',
        text: "Dashboard"
    },

    {
        children: [
            {
              text: "View and Update Suburb",
              path: "/view-suburb"
            }
          ]
    },

]

请注意，两个对象被完全删除，第三个对象的某些部分也被删除。如何使用 JS 实现此目的？

到目前为止我所做的就是这样

items.filter(e=>{
    if(e.path){
        return permissions.includes(e.path)
    }else{

    }
})

希望您能清楚我的问题。

Answer 1

您可以使用reduce来做到这一点 - 单独的过滤器在这里不起作用，因为您实际上是在转换子数组而不是纯粹过滤顶级数组项

routes.reduce((result, route) => {
  const { path, children } = route;
  if (children) {
    const filteredChildren = children.filter(child => permissions.includes(child.path));

    // case where some child routes match permissions
    if (filteredChildren.length !== 0) {
        return [ ...result, { ...route, children: filteredChildren }];
    } 
  }

  // case where path is present and permissions includes path
  if (path && permissions.includes(path)) {
      return [ ...result, route ];
  }

  // case where there's no match between path and permissions 
  return result;
}, []);