JS filter some part from an array of objects

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.

mbdavis · Accepted Answer · 2019-10-14 12:31:01Z

2

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

answered Oct 14, 2019 at 12:31

mbdavis

4,0302 gold badges24 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sudhakar · Accepted Answer · 2019-10-14 12:44:12Z

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)

Vishal modi · Accepted Answer · 2019-10-14 12:55:41Z

0

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

answered Oct 14, 2019 at 12:55

Vishal modi

1,7202 gold badges13 silver badges22 bronze badges

Comments

Programmer · Accepted Answer · 2019-10-14 12:24:12Z

-2

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

answered Oct 14, 2019 at 12:24

Programmer

4431 gold badge5 silver badges13 bronze badges

2 Comments

mbdavis Over a year ago

Agree if this is angular - not sure if it is though

margherita pizza Over a year ago

Yes this is not Angular. This is VueJS

Collectives™ on Stack Overflow

JS filter some part from an array of objects

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related