Filtering nested arrays in Angular by cross-referencing with a navigation menu

Question

Filtering nested arrays in Angular by cross-referencing with a navigation menu

In the legacy application I'm working on, we have a navigation menu along with a list of user roles. Due to its legacy nature, we have accumulated a significant number of user roles over time.

The main goal is to dynamically display the navigation menu based on the roles assigned to each user.

Keep in mind that a single user can have multiple roles and a particular menu item can be accessible by more than one role.
To achieve this, we need to compare the user's roles with the roles specified for each menu item and its child items.

Below are the arrays containing the User Role information and Navigation Items data:

The objective here is to efficiently filter down the navigation items array based on the user's roles.

User Role Array:

["ABS","ADM", ... (roles listed) ..., "USER"]

Nav Item array:

(Navigation items interface defined here)

The solution I've tried so far hasn't delivered the desired outcome. It seems like I may have made a mistake somewhere as it's not functioning as intended.

(Code snippet attempting to match user roles with navigation items)

If anyone has any suggestions or insights on how to approach this issue, your help would be greatly appreciated! :)

javascript arrays angular typescript angular12

Answer 1

Answer №1

I approached this problem differently by utilizing the reduce function and a couple of some methods. My assumption was that if the target role was not found in the main navigation, then it should skip the children. This function takes an array of roles as input and filters down the navigation accordingly.

const getNavForRole = (roles) => {
  return navItems.reduce((b, a) => {
    if (!a.role.some(r => roles.includes(r))) return b;
    a.children = a.children.filter(f => f.role.some(r => roles.includes(r)))
    return [...b, a]
  }, [])
}

let navItems = [{
    // code snippet continues...

Answer 2

I approached this problem differently by utilizing the reduce function and a couple of some methods. My assumption was that if the target role was not found in the main navigation, then it should skip the children. This function takes an array of roles as input and filters down the navigation accordingly.

const getNavForRole = (roles) => {
  return navItems.reduce((b, a) => {
    if (!a.role.some(r => roles.includes(r))) return b;
    a.children = a.children.filter(f => f.role.some(r => roles.includes(r)))
    return [...b, a]
  }, [])
}

let navItems = [{
    // code snippet continues...

Filtering nested arrays in Angular by cross-referencing with a navigation menu

Answer №1

Similar questions

What is the process for configuring my CSS and JS files to send HTTP response headers?

Problem with Ajax functionality on Jquery Dialog

Change the CSS menu item to directly load the website instead of using javascript to replace a placeholder

It appears that the mysqli_query function is executing more than once

Issue with form validation causing state value to remain stagnant

Utilizing ASCX to trigger JavaScript functions within an ASPX page

Retrieve the value from an input tag that is only displayed based on a condition using *ngIf

Issues arise with loading AngularJS directive properly within the context of service utilization

Tips on generating model names dynamically within a service

Using JQuery to enable the movement of divs on a screen through clicking and dragging, without the use of

Choose not to alter the display value during keyup and keydown events, while still triggering the change event

What could be causing the ajax request to not go through?

Creating one-to-one relationships in sequelize-typescript can be achieved by setting up multiple foreign keys

Tips for Uploading Large Images to Backend API in Next.js

Determining Asynchrony in Node.js Through Programming

Strategies for Obtaining a Response Following a Function Execution in React JS

Utilize jQuery and JSP (or PHP) to showcase detailed information about a specific item when a user clicks on it within an HTML page

What is the best way to ensure that decimal numbers are shown in the right locale number format by default in an Ionic/Angular app

Ionic 2 hides the form input area within its input component

Issue encountered when attempting to invoke a PHP function using Javascript through AJAX