Continue iterating using (forEach, map,...) until the object (children) has no more elements

Question

Continue iterating using (forEach, map,...) until the object (children) has no more elements

I need to disable the active status for all elements within my object structure. Here is an example of my object:

const obj = 
  { name: 'obj1'
  , ative: true
  , children: 
    [ { name: 'obj2'
      , ative: true
      , children: 
        [ { name: 'Obj23'
          , ative: true
          , children: [...] 
      } ] } 
    , { name: 'obj3'
      , children: 
        [ { name: 'Obj32'
          , ative: true
          , children: [...] 
      } ] } 
    , ...
    }

My goal is to set the active property to false for the main object obj1 and all its children, including sub-children.
I am unsure of how many levels of children there might be under each child, so I believe a loop using something like map will be necessary.
The loop should terminate when a child has no further children (length equals 0).

UPDATE: I appreciate all the helpful solutions provided. Thank you!

javascript typescript javascript-objects

Answer 1

Answer №1

To achieve the same outcome, you can utilize JSON.parse along with reviver function like so:

JSON.parse(JSON.stringify(obj), (key, value ) => key === 'ative' ? false : value );

const obj = {
    name: 'object1',
    ative: true,
    children: [{
        name: 'object2',
        ative: true,
        children: [{
            name: 'Object23',
            ative: true,
            children: []
        }]
    },
    {
        name: 'object3',
        children: [{
            name: 'Object32',
            ative: true,
            children: []
        }]
    }]
}

const result = JSON.parse(JSON.stringify(obj), (key, value) => key === 'ative' ? false : value);

console.log(result);

Answer 2

To achieve the same outcome, you can utilize JSON.parse along with reviver function like so:

JSON.parse(JSON.stringify(obj), (key, value ) => key === 'ative' ? false : value );

const obj = {
    name: 'object1',
    ative: true,
    children: [{
        name: 'object2',
        ative: true,
        children: [{
            name: 'Object23',
            ative: true,
            children: []
        }]
    },
    {
        name: 'object3',
        children: [{
            name: 'Object32',
            ative: true,
            children: []
        }]
    }]
}

const result = JSON.parse(JSON.stringify(obj), (key, value) => key === 'ative' ? false : value);

console.log(result);

Answer 3

Answer №2

There are two primary methods that can be employed

Sequential method
Recursive technique

Typically, the sequential method proves to be more efficient in terms of both memory usage and processing speed compared to the recursive approach, which necessitates extra memory complexity of O(n) for each function call in the stack.

In the sequential method, utilizing array functions such as map and forEach becomes impractical due to the uncertainty of the array length and termination criteria. Even if applied, it would involve modifying the traversed array, leading to unintended side effects. Instead, a basic while loop will suffice.

Procedure:

Form a stack array and insert the initial object into it
While the stack is not empty
- Select the current item popped from the stack
- Assign false to current's active
- Include the children of current into the stack to explore their descendants
Provide the resulting item (optional, considering the modification of the original object)

Code Structure:

Firstly, define a schema for the input data structure:

type Element = {
  title: string;
  active?: boolean;
  children: Element[];
};

Next, implement the main function:

const activateItems = (data: Element): Element => {
  const stack = [data];

  while (stack.length) {
    const current = stack.pop();

    if (!current) continue;

    current.active = false;

    stack.push(...current.children);
  }

  return data;
};

sandbox

Answer 4

There are two primary methods that can be employed

Sequential method
Recursive technique

Typically, the sequential method proves to be more efficient in terms of both memory usage and processing speed compared to the recursive approach, which necessitates extra memory complexity of O(n) for each function call in the stack.

In the sequential method, utilizing array functions such as map and forEach becomes impractical due to the uncertainty of the array length and termination criteria. Even if applied, it would involve modifying the traversed array, leading to unintended side effects. Instead, a basic while loop will suffice.

Procedure:

Form a stack array and insert the initial object into it
While the stack is not empty
- Select the current item popped from the stack
- Assign false to current's active
- Include the children of current into the stack to explore their descendants
Provide the resulting item (optional, considering the modification of the original object)

Code Structure:

Firstly, define a schema for the input data structure:

type Element = {
  title: string;
  active?: boolean;
  children: Element[];
};

Next, implement the main function:

const activateItems = (data: Element): Element => {
  const stack = [data];

  while (stack.length) {
    const current = stack.pop();

    if (!current) continue;

    current.active = false;

    stack.push(...current.children);
  }

  return data;
};

sandbox

Answer 5

Answer №3

While wonderflame makes a valid point about the advantages of a stack-based approach for unknown tree sizes, it's important to consider that if you are confident your tree will not grow too deep, a recursive method may be more straightforward and practical.

def deactivate_recursive(obj):
  
  return {
    ...obj,
    active: False,
    children: [deactivate_recursive(child) for child in obj.children]
  }

Answer 6

While wonderflame makes a valid point about the advantages of a stack-based approach for unknown tree sizes, it's important to consider that if you are confident your tree will not grow too deep, a recursive method may be more straightforward and practical.

def deactivate_recursive(obj):
  
  return {
    ...obj,
    active: False,
    children: [deactivate_recursive(child) for child in obj.children]
  }

Continue iterating using (forEach, map,...) until the object (children) has no more elements

Answer №1

Answer №2

Answer №3

Similar questions

What is the recommended method for deleting sequelize.connectionManager.getConnection according to the Sequelize documentation?

Tips for choosing or moving to an iframe

Is there a way to retrieve the timestamp of a DOM change event when using MutationObserver for event tracking?

The issue with sorting in Angular 8 mat tables persists when dealing with multiple tables

Node is currently posing a challenge for the installation of packages

Manipulate elements by adding and removing classes sequentially based on an array

Integrating concealed elements into jspdf

Function to save prices as cent-based figures in Javascript using Regex

Ways to turn off a TypeScript error across the entire project

Spinning divs using JavaScript when the mouse hovers over them, and then returning them to their original position when the mouse moves

What is the best way to shrink or enlarge individual sections of the accordion?

What is the best way to create a dynamic information page using both V-for and V-if in Vue.js?

Issue with setting and showing the PHP data array within the vue.js variable

Instructions on how to eliminate the minutes button from Material UI datetime picker

Verifying user input with JQuery's $.post function

TypeORM issue - UnsupportedDataTypeError

Troubleshooting Ajax contact form's failure to refresh (PHP and Bootstrap 4)

Using PHP to calculate the total number of records within an HTML document

Issue with Material-ui IconButton's edge properties not functioning as expected

Tips for maximizing the benefits of debounce/throttle and having a truly dynamic experience