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

Question

I've this array.

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

]

and I've this array

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

What I want is filter out objects from the array where there is not in the permissions array.

My expected out put is this

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

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

]

Note that two objects are completely removed and some part of the third object also removed. How do I achieve this using JS?

What I've done upto now is this

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

    }
})

Hope my question is clear to you.

Answer 1

You could do it with a reduce - filter alone won't work here as you're actually transforming child arrays rather than purely filtering the top level array items

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;
}, []);

Answer 2

Try this!!

 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']; let result = []; permissions.map(permission=>{ routes.map(route=>{ if(route.hasOwnProperty('children')){ route.children.map((r,i)=>{ if(r.path == permission){ route.children = route.children.splice(i); route.children = route.children.slice(-1); result.push(route) } }); }else{ if(route.path == permission){ result.push(route) } } }); }) console.log(result)

Answer 3

This one also worked for me.

    var newData = [];

    $.each(routes, function (key, value) {
        debugger
        var data = this;
        if (data.path) {
            if (permissions.includes(data.path)) {
                newData.push(data);
            }
        }
        else {
            var data2 = data;
            $.each(data2, function (key, value1) {

                $.each(value1, function (key, value) {

                    var data = value;
                    if (data.path) {
                        if (permissions.includes(data.path)) {
                            newData.push(data);
                        }
                    }
                });
           });
        }
    })

Answer 4

Actually you're on the right path. A little modification is required in your approach to solving the problem and the code you've already written will give you the desired result.

Observe carefully: your children inside routes array is a replica of roue itself.

So, what you need to do is:

1. Put the logic you've already written for filtering an array of objects in a separate function and modify it such a way that it takes an object as an argument, check for the existence of the "path" key in the object and return true if permissions.includes(argumentObject.path)
2. Loop ove the routes array
3. If your iterated object hasOwnProperty('children') then call the function with the objects of children array as argument
4. Else call the function with the objects of routes array as an argument

Hope this algorithm makes sense, let me know if you need any help with the code.

Answer 5

Ideally, you should check the access to the route inside the canActivate guard and navigate the user further to the appropriate route.