How to check the values of an array and delete some properties based on the condition?

user_9152883 0
Viewed 36

i have an array like this :PermissionList:["RealPersonTab","LegalPersonTab","CustomerUserTab" ,...] .And I have another array like this :

customerSubMenu: [
        {
          id: 1,
          name: "RealPerson",
          to: "/main/customers/real",
          accessKey:"RealPersonTab"
        },
        {
          id: 1.1,
          name: "LegalPerson",
          to: "/main/customers/legal",
          accessKey:"LegalPersonTab"
        },
        {
          id: 1.2,
          name: "CustomerUser",
          to: "/main/users/customer",
          accessKey:"CustomerUserTab"
        },
        {
          id: 1.3,
          name: "OfficeUser",
          to: "/main/users/official",
          accessKey:"OfficeUserTab"
        },   
      ],

This is how I use customerSubMenu:

   {customerSubMenu.map((link) => {
                        return (
                          <div key={link.id}>
                            <ul className="space">
                              <li onClick={() => this.handleClick(link.id) } className="sidebar-item">
                                <Link to={link.to}>
                                  <i className="sidebar-icon"></i>
                                    <span>
                                      {link.name}
                                    </span>
                                </Link>
                              </li>
                            </ul>
                          </div>
                        );
                      })}
                    </div>
                  ) :("")}

What I want is if, for example, RealPersonTab did not exist in the PermissionList array,In the customerSubMenu array, delete the object whose accessKey was equal to RealPersonTab

reactjs arrays javascript
3 Answers

Sounds like you are trying to filter the customerSubMenu before mapping it to JSX.

Filter the customerSubMenu array by elements that have an accessKey property in the customerSubMenu array.

customerSubMenu
  .filter(link => customerSubMenu.includes(link.accessKey))
  .map(link => { ..... JSX ......})
user_86908570

You can just update the array of customerSubMenu to be equal to and altered version which return only item which accessKey exists in the PermissionList. You can perform that like this

customerSubMenu = [...customerSubMenu].filter((menu) => {
    return PermissionList.indexOf(menu.accessKey) !== -1;
});
user_61082830

Solution using Set

const 
  permissionList = new Set(["RealPersonTab", "LegalPersonTab", "CustomerUserTab"]),
  customerSubMenu = [
    {
      id: 1,
      name: "RealPerson",
      to: "/main/customers/real",
      accessKey: "RealPersonTab",
    },
    {
      id: 1.1,
      name: "LegalPerson",
      to: "/main/customers/legal",
      accessKey: "LegalPersonTab",
    },
    {
      id: 1.2,
      name: "CustomerUser",
      to: "/main/users/customer",
      accessKey: "CustomerUserTab",
    },
    {
      id: 1.3,
      name: "OfficeUser",
      to: "/main/users/official",
      accessKey: "OfficeUserTab",
    },
  ];
  filteredMenu = customerSubMenu.filter((c) => permissionList.has(c.accessKey));

console.log(filteredMenu)

user_117193140
Related