Continuously verify if there are any active child elements

Question

Continuously verify if there are any active child elements

I am dealing with a recursive list of items in Angular/TypeScript. My goal is to only show items when they are either active=true; themselves or if any of their children or grandchildren are also active=true.

data.json

[
    {
        "active": true,     
        "items": [
            {
                "active": false,    
                "items": [
                    {
                        "active": false,
                        "items": []
                    },
                    {
                        "active": false,
                        "items": []
                    }
                ]
            },
            {
                "active": false,    
                "items": [
                    {
                        "active": true,
                        "items": []
                    }
                ]
            },
            {
                "active": true,    
                "items": [
                    {
                        "active": true,
                        "items": []
                    }
                ]
            }
        ]
    }
]

Despite my current recursive method, it still does not handle nested items and incorrectly returns false for all parents when I set the deepest item as active=false;

The issue arises from the fact that when an item had children, the recursion would simply continue (

return this.hasActiveChildren(i);

) without considering the current item.active status.

method.ts

  public hasActiveChildren(item: Item): boolean {
    if (item.items === null || item.items.length <= 0) {
      return false;
    }

    return item.items.some(i => {
      if (i.items === null || i.items.length <= 0) {
        return i.active;
      } else {
        return this.hasActiveChildren(i);
      }
    });
  }

A second method performs better by returning false for a parent if all immediate children are active=false;. Nonetheless, it still overlooks the children´s children.

updatedMethod.ts

  public hasActiveChildren(item: Item): boolean {
    for (const i of item.items) {
      if (i.active === true) {
        return true;
      } else if(i.items=== null || i.items.length <= 0) {
        return this.hasActiveChildren(i);
      }
    }

    return false;
  }

I might need to specify:

I have a recursive list of items with an unknown depth
Each item possesses an active property
I aim to develop a method that yields true when any children or children´s children's active property is set to true
Two methods have been created to address this issue, but neither fully solves it

typescript

Answer 1

Answer №1

Your current method of checking if the children are active only when the parent is not active may lead to issues. It's best to recursively check the children every time or before determining the status of the parent. I've utilized the following model:

interface Item {
    isActive: boolean,
    subItems: Item[]
}

Below is an approach using the filter function, which will call the function for each child item before returning an array of all actively displayed items within item.subItems. By using ||, this method displays the item if any of its children are active OR if the item itself is active. The crucial point here is that the condition item.isActive is assessed AFTER considering its children recursively.

function displayItem(item: Item): boolean {
    const result: boolean = item.subItems.filter(subItem => displayItem(subItem)).length > 0 || item.isActive;
    // Perform logic to show the item based on the result
    return result;
}

Alternatively, you may find the following method clearer. The initial state of the result depends on the value of isActive, and subsequently, all children are checked recursively. If any child is found to be active, the result is set to true.

function displayItem(item: Item): boolean {
    let result: boolean = item.isActive;
    for (let subItem of item.subItems) {
        if (displayItem(subItem)) {
            result = true;
        }
    }
    // Perform logic to show the item based on the result
    return result;
}

Answer 2

Your current method of checking if the children are active only when the parent is not active may lead to issues. It's best to recursively check the children every time or before determining the status of the parent. I've utilized the following model:

interface Item {
    isActive: boolean,
    subItems: Item[]
}

Below is an approach using the filter function, which will call the function for each child item before returning an array of all actively displayed items within item.subItems. By using ||, this method displays the item if any of its children are active OR if the item itself is active. The crucial point here is that the condition item.isActive is assessed AFTER considering its children recursively.

function displayItem(item: Item): boolean {
    const result: boolean = item.subItems.filter(subItem => displayItem(subItem)).length > 0 || item.isActive;
    // Perform logic to show the item based on the result
    return result;
}

Alternatively, you may find the following method clearer. The initial state of the result depends on the value of isActive, and subsequently, all children are checked recursively. If any child is found to be active, the result is set to true.

function displayItem(item: Item): boolean {
    let result: boolean = item.isActive;
    for (let subItem of item.subItems) {
        if (displayItem(subItem)) {
            result = true;
        }
    }
    // Perform logic to show the item based on the result
    return result;
}

Answer 3

Answer №2

After some thorough investigation, I developed a recursive approach that appears to be effective and efficient.

method.ts

  public hasActiveChildren(item: Item): boolean {
    // If the item has no sub items, always return false
    if (item.items == null || item.items.length < 0) {
      return false;
    }

    for (const i of item.items) {
      // If any sub item is active, always return true
      if (i.active === true) {
        return true;
      } else {
        // Otherwise, repeat the process
        return this.hasActiveChildren(i);
      }
    }
    
    // Default return value in case of compiler errors
    return false;
  }

Edit: The method performs well when an item only has one sub item at most. However, upon further testing, I discovered that it falls short in handling larger nested structures. Therefore, there is still room for improvement.

Answer 4

After some thorough investigation, I developed a recursive approach that appears to be effective and efficient.

method.ts

  public hasActiveChildren(item: Item): boolean {
    // If the item has no sub items, always return false
    if (item.items == null || item.items.length < 0) {
      return false;
    }

    for (const i of item.items) {
      // If any sub item is active, always return true
      if (i.active === true) {
        return true;
      } else {
        // Otherwise, repeat the process
        return this.hasActiveChildren(i);
      }
    }
    
    // Default return value in case of compiler errors
    return false;
  }

Edit: The method performs well when an item only has one sub item at most. However, upon further testing, I discovered that it falls short in handling larger nested structures. Therefore, there is still room for improvement.

Continuously verify if there are any active child elements

Answer №1

Answer №2

Similar questions

Triggering JSON schema validation event in React's Monaco Editor

Creating a class and initializing it, then implementing it in other classes within an Angular application

Storing the subscription value retrieved from an API in a global variable

Is there a way to trigger a custom event from a Web Component and then intercept it within a React Functional Component for further processing?

Typescript for managing the Shopify admin API

unable to successfully complete parameter in angular 2

Struggling to track down the issue in my ts-node express project (Breakpoint being ignored due to generated code not being located)

Guide on setting up global typing for AngularJS in your project

Version 5 of angularfie2 is encountering an issue where the type 'Observable<{}[]>' cannot be assigned to the type 'Observable<any[]>'

enhancing the types of parameters in a function declaration without relying on generics

An issue was encountered at node_modules/@fullcalendar/core/main.d.ts(1196,54), error TS1144: Expecting either '{' or ';'

Passing parent form controls from an Angular 4 FormGroup to a child component

Leverage glob patterns within TypeScript declaration files

The Server Components render encountered a glitch

Tips for creating a redirect to a specific page after clicking a link in an email using Angular

Creating a dynamic path to an imported file in React: A step-by-step guide

Is the autoIncrement property missing from the IDBObjectStore Interface in Typescript 1.8 lib.d.ts file?

Even after making changes within my Angular and Firebase subscription, my variable remains unchanged

What is the significance of the exclamation mark in Vue Property Decorator?

Tips on utilizing a pre-defined parametrized selector within the createSelector function