Checking nested arrays recursively in Typescript

Question

Checking nested arrays recursively in Typescript

I'm facing difficulty in traversing through a nested array which may contain arrays of itself, representing a dynamic menu structure. Below is how the objects are structured:

This is the Interface IMenuNode:

Interface IMenuNode:

export interface IMenuNode {
    title: string;
    haveChildren: boolean;
    id: string;
    node: Array<IMenuNode>;
    link: string;
    img: string;
    value: string;
}

Class DataNode implementing IMenuNode

export class DataNode implements IMenuNode {
    title: string;
    haveChildren: boolean;
    id: string;
    node: Array<IMenuNode>;
    link: string;
    img: string;
    value: string;


userMenu: Array<IMenuNode>;

I have some data stored in MenuData as shown below:

const MenuData: Array<IMenuNode> =
    [
        new DataNode('Menu 1', true, 'menu1', [
            new DataNode('SubMenu 1', true, 'submenu1',[
                new DataNode('SubSubMenu1', false ,'subsubmenu1', null, "/", "pathSelectorIcon.png"),
                new DataNode('SubSubmenu2', false, 'subsubmenu2', null ,"/", "pathSelectorIcon.png"),
            ]),
            new DataNode('Menu 2', true, 'menu2', [
            new DataNode('SubMenu 1', true, 'submenu1',[
                new DataNode('SubSubMenu1', false ,'subsubmenu1', null, "/", "pathSelectorIcon.png"),
                new DataNode('SubSubmenu2', false, 'subsubmenu2', null ,"/", "pathSelectorIcon.png"),
            ]),

How can I iterate over the entire MenuData (including recursively) and dynamically construct a new menu (userMenu) based on certain conditions to determine the items (menus and submenus) that should be included?

arrays typescript recursion nested

Answer 1

Answer №1

It seems that the function provided below is fulfilling your expectations, I hope it proves to be helpful.

userMenu = createUserMenu(MenuData);

function createUserMenu(original: Array<IMenuNode>): Array<IMenuNode> {
    const newMenu: Array<IMenuNode> = [];
    for (let menu of original) {
        if (User.hasAccess(menu)) { // or any other requirements

            // To ensure a new reference
            // Note that children are not passed, they must go through the recursive method below
            const newNode = new DataNode(menu.title, menu.haveChildren, menu.id, null, menu.link, menu.img, menu.value);
            newMenu.push(newNode);
            if (newNode.haveChildren) {
                newNode.node = createUserMenu(menu.node);
            }
        }
    }
    return newMenu;
}

I have also made edits on your class and interface in order to guarantee that the setup functions correctly based on the example.

interface IMenuNode {
    title: string;
    haveChildren: boolean;
    id: string;
    node?: Array<IMenuNode>;
    link?: string;
    img?: string;
    value?: string;
}

class DataNode implements IMenuNode {

    constructor(
        public title: string,
        public haveChildren: boolean,
        public id: string,
        public node?: Array<IMenuNode>,
        public link?: string,
        public img?: string,
        public value?: string,
    ) { }
}

Edit: Below is an updated example that validates children before adding the current level to the new menu.

// The updated function only includes "dir" menus if they have children that the user has access to
function createUserMenu2(original: Array<IMenuNode>): Array<IMenuNode> {
    const newMenu: Array<IMenuNode> = [];
    for (let menu of original) {
        if (User.hasAccess(menu)) {// Or other conditions
            // To ensure new reference
            // Note not passing the children, they must pass through recursive method below
            const newNode = new DataNode(menu.title, menu.haveChildren, menu.id, null, menu.link, menu.img, menu.value);
            if (newNode.haveChildren) {
                newNode.node = createUserMenu2(menu.node);
            }
            // Only add the menu if it has a link or if it stores a menu that the user can access with a link
            if (Array.isArray(newNode.node) && newNode.node.length > 0 || newNode.link) {
                newMenu.push(newNode);
            }
        }
    }
    return newMenu;
}

Answer 2

It seems that the function provided below is fulfilling your expectations, I hope it proves to be helpful.

userMenu = createUserMenu(MenuData);

function createUserMenu(original: Array<IMenuNode>): Array<IMenuNode> {
    const newMenu: Array<IMenuNode> = [];
    for (let menu of original) {
        if (User.hasAccess(menu)) { // or any other requirements

            // To ensure a new reference
            // Note that children are not passed, they must go through the recursive method below
            const newNode = new DataNode(menu.title, menu.haveChildren, menu.id, null, menu.link, menu.img, menu.value);
            newMenu.push(newNode);
            if (newNode.haveChildren) {
                newNode.node = createUserMenu(menu.node);
            }
        }
    }
    return newMenu;
}

I have also made edits on your class and interface in order to guarantee that the setup functions correctly based on the example.

interface IMenuNode {
    title: string;
    haveChildren: boolean;
    id: string;
    node?: Array<IMenuNode>;
    link?: string;
    img?: string;
    value?: string;
}

class DataNode implements IMenuNode {

    constructor(
        public title: string,
        public haveChildren: boolean,
        public id: string,
        public node?: Array<IMenuNode>,
        public link?: string,
        public img?: string,
        public value?: string,
    ) { }
}

Edit: Below is an updated example that validates children before adding the current level to the new menu.

// The updated function only includes "dir" menus if they have children that the user has access to
function createUserMenu2(original: Array<IMenuNode>): Array<IMenuNode> {
    const newMenu: Array<IMenuNode> = [];
    for (let menu of original) {
        if (User.hasAccess(menu)) {// Or other conditions
            // To ensure new reference
            // Note not passing the children, they must pass through recursive method below
            const newNode = new DataNode(menu.title, menu.haveChildren, menu.id, null, menu.link, menu.img, menu.value);
            if (newNode.haveChildren) {
                newNode.node = createUserMenu2(menu.node);
            }
            // Only add the menu if it has a link or if it stores a menu that the user can access with a link
            if (Array.isArray(newNode.node) && newNode.node.length > 0 || newNode.link) {
                newMenu.push(newNode);
            }
        }
    }
    return newMenu;
}

Checking nested arrays recursively in Typescript

Answer №1

Similar questions

Is there a quicker method to access an object's ID?

Steps for determining if a string is compatible with a user-defined type in Typescript

Fatal error: The street number index is not defined

What causes a segmentation error when attempting to modify a char array passed as an argument in a function?

Unrestricted Angular Audio Playback without CORS Restrictions

How can I search multiple columns in Supabase using JavaScript for full text search functionality?

The element is implicitly assigned an 'any' type due to the fact that an expression of type 'any' cannot be used to index types in nodejs and solidity

Angular2: The provided arguments do not correspond to any valid call signature

Ways to streamline redundant code by creating a higher order function that accepts different parameter types in TypeScript

Managing user inputs and storing them in separate variables in C#

atom-typescript - What could be causing the unrecognized Typescript configuration options?

Create custom validation rules and error messages using JSON data in jQuery

Are there any methods within Angular 2 to perform Angular binding within a string?

The Type-Fest library in TypeScript is malfunctioning when used with a constant

Having difficulty with express.index when trying to send a JSON object

Tips for transferring state information from a client to a server component within Nextjs?

How can I retrieve the most recent 500 entries from a PHP object?

The proper method for retrieving FormData using SyntheticEvent

Tips for retrieving input data sent from the parent component in Angular 2

Customize the text displayed in a dropdown menu in Angular Material based on the selection made