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

Encountering the error message "This expression cannot be invoked" within a Typescript React Application

When working with TypeScript, encountering an error involving an array containing an index signature

Guide to aligning a component in the middle of the screen - Angular

Error message displaying 'class-transformer returning undefined'

What is the process for specifying a data type for a pre-existing npm package module?

What is the process for marking a form field as invalid?

Utilizing Angular for Webcam Integration

What is the best way to exclude React.js source files from a fresh Nest.js setup?

Debug errors occur when binding to computed getters in Angular 2

What steps can be taken to ensure that all object properties become reactive?

What is the best way to make the SPA load with the tab displaying the highest value?

Implementing dynamic display of div based on dropdown selection in typescript

I haven't encountered any type warnings in the places where I anticipated them

Having trouble with errors when trying to implement react-router-v6 with typescript

The functionality of the Ionic menu button becomes disabled once the user has successfully logged in

Enums are not recognized by TypeScript when used within an array

The type does not contain a property named `sort`

Is there a way for me to access the names of the controls in my form directly from the .html file?

Error: The reference 'GetServerSideProps' is being incorrectly used as a type instead of a value. Perhaps you intended to use 'typeof GetServerSideProps' instead?

Error message indicating that the function is not defined within a custom class method