Best way to extract objects from an array by filtering based on the nested property value at nth level in JavaScript

Question

Best way to extract objects from an array by filtering based on the nested property value at nth level in JavaScript

Looking for a Solution: Is there an efficient method to filter out objects from an array based on a specific property value without using recursion?

The Issue: While the recursive approach works for filtering, it struggles with performance due to a large dataset and numerous nested objects within each object.

Here is a snippet of sample data:

[{
  children: [{
    children: [{
      children: [],
      isWorking: 'yes'
    }]
  }]
}, {
  children: [],
  isWorking: 'no'
}, {
  children: [{
    children: [{
      children: [],
      isWorking: 'no'
    }]
  }]
}, {
  children: [{
    children: [],
    isWorking: 'yes'
  }]
}, ...]

I want to filter out the top-level objects that have a nested isWorking property set to yes.
The isWorking property is only present in objects without any children. i.e. children: []

While I have achieved this using recursion, I am seeking a more optimized solution to enhance performance.

This is my current working solution:

const parent = [{
  children: [{
    children: [{
      children: [],
      isWorking: 'yes'
    }]
  }]
}, {
  children: [],
  isWorking: 'no'
}, {
  children: [{
    children: [{
      children: [],
      isWorking: 'no'
    }]
  }]
}, {
  children: [{
    children: [],
    isWorking: 'yes'
  }]
}];

const isWorkingFlagArr = [];

function checkForOccupation(arr) {
  arr.forEach(obj => {
    (!obj.children.length) ? isWorkingFlagArr.push(obj.isWorking === 'yes') : checkForOccupation(obj.children)
  })
}

checkForOccupation(parent);

const res = parent.filter((obj, index) => isWorkingFlagArr[index]);

console.log(res);

javascript arrays object recursion

Answer 1

Answer №1

This solution tackles the issue of stack overflow by queuing each recursive call as a new microtask.

While implementing the same algorithm as yours, this code ensures that recursive calls are executed asynchronously on separate microtasks.

Take note of the following details 👇

i. Top-level async is not supported by StackOverflow.

ii. async keyword is utilized to enable the use of await functionality.

iii. Employing an Async IIFE (Immediately Invoked Function Expression).

iv. Your original algorithm implementation.

v. Pausing the loop execution until the promise from the recursive call is resolved. This acts similar to using
.then(() => checkForOccupation(children))
, allowing for asynchronous recursive calls with fresh stacks on microtasks to prevent deep nesting issues and lack of tail-call recursion optimization in JavaScript, albeit it may come with performance consequences.

vi. Initiation of the async IIFE to start the process.

vii. Executing the outer async IIFE to work around the absence of top-level async support in StackOverflow environments.

(async () => {  // i.
  const getFlags = async (arr) => {  // ii.
      const flags = []

      await (async function checkForOccupation(arr) {  // iii.
          for(const { children, isWorking } of arr) {  // iv.
              !children.length
                  ? flags.push(isWorking === 'yes') 
                  : await checkForOccupation(children)  // v.
          }
      })(arr)  // vi.

      return flags
  }

  const data = [{
    children: [{
      children: [{
        children: [],
        isWorking: 'yes'
      }]
    }]
  }, {
    children: [],
    isWorking: 'no'
  }, {
    children: [{
      children: [{
        children: [],
        isWorking: 'no'
      }]
    }]
  }, {
    children: [{
      children: [],
      isWorking: 'yes'
    }]
  }]

  const flags = await getFlags(data)
  console.log(data.filter((_, index) => flags[index]))
})()

An alternative method would involve managing state explicitly through a stack, which can be cumbersome to implement.

Answer 2

This solution tackles the issue of stack overflow by queuing each recursive call as a new microtask.

While implementing the same algorithm as yours, this code ensures that recursive calls are executed asynchronously on separate microtasks.

Take note of the following details 👇

i. Top-level async is not supported by StackOverflow.

ii. async keyword is utilized to enable the use of await functionality.

iii. Employing an Async IIFE (Immediately Invoked Function Expression).

iv. Your original algorithm implementation.

v. Pausing the loop execution until the promise from the recursive call is resolved. This acts similar to using
.then(() => checkForOccupation(children))
, allowing for asynchronous recursive calls with fresh stacks on microtasks to prevent deep nesting issues and lack of tail-call recursion optimization in JavaScript, albeit it may come with performance consequences.

vi. Initiation of the async IIFE to start the process.

vii. Executing the outer async IIFE to work around the absence of top-level async support in StackOverflow environments.

(async () => {  // i.
  const getFlags = async (arr) => {  // ii.
      const flags = []

      await (async function checkForOccupation(arr) {  // iii.
          for(const { children, isWorking } of arr) {  // iv.
              !children.length
                  ? flags.push(isWorking === 'yes') 
                  : await checkForOccupation(children)  // v.
          }
      })(arr)  // vi.

      return flags
  }

  const data = [{
    children: [{
      children: [{
        children: [],
        isWorking: 'yes'
      }]
    }]
  }, {
    children: [],
    isWorking: 'no'
  }, {
    children: [{
      children: [{
        children: [],
        isWorking: 'no'
      }]
    }]
  }, {
    children: [{
      children: [],
      isWorking: 'yes'
    }]
  }]

  const flags = await getFlags(data)
  console.log(data.filter((_, index) => flags[index]))
})()

An alternative method would involve managing state explicitly through a stack, which can be cumbersome to implement.

Answer 3

Answer №2

I can't guarantee if this code will outperform yours, but I believe it's much simpler:

const checkForOccupation = (xs) => xs .flatMap (
  (x, _, __, kids = checkForOccupation (x .children || [])) => 
    x .isWorking == 'yes' || kids .length > 0  ? [{...x, children: kids}] : []
)

const data = [{children: [{children: [{children: [{children: [], isWorking: 'no'}], isWorking: 'yes'}]}]}, {children: [], isWorking: 'no'}, {children: [{children: [{children: [], isWorking: 'no'}]}]}, {children: [{children: [], isWorking: 'yes'}]}]

console .log (checkForOccupation (data))

.as-console-wrapper {max-height: 100% !important; top: 0}

By using flatMap, we combine transformation and filtering in one step. We recursively iterate over the children array of each node, checking for a specific value in the process. If certain conditions are met, we return an object with modified properties to flatMap, otherwise, we return an empty array. The results are then flattened by flatMap.

Some concerns were raised about potential stack overflow, which should only happen with deeply nested objects. In such extreme cases, stack overflow would likely be the least of your worries.

Answer 4

I can't guarantee if this code will outperform yours, but I believe it's much simpler:

const checkForOccupation = (xs) => xs .flatMap (
  (x, _, __, kids = checkForOccupation (x .children || [])) => 
    x .isWorking == 'yes' || kids .length > 0  ? [{...x, children: kids}] : []
)

const data = [{children: [{children: [{children: [{children: [], isWorking: 'no'}], isWorking: 'yes'}]}]}, {children: [], isWorking: 'no'}, {children: [{children: [{children: [], isWorking: 'no'}]}]}, {children: [{children: [], isWorking: 'yes'}]}]

console .log (checkForOccupation (data))

.as-console-wrapper {max-height: 100% !important; top: 0}

By using flatMap, we combine transformation and filtering in one step. We recursively iterate over the children array of each node, checking for a specific value in the process. If certain conditions are met, we return an object with modified properties to flatMap, otherwise, we return an empty array. The results are then flattened by flatMap.

Some concerns were raised about potential stack overflow, which should only happen with deeply nested objects. In such extreme cases, stack overflow would likely be the least of your worries.

Best way to extract objects from an array by filtering based on the nested property value at nth level in JavaScript

Answer №1

Answer №2

Similar questions

Activate the following and preceding elements within the 'vue-owl-carousel' component for Vue.js

My Vue.js accordion menu component is experiencing issues with toggle flags, causing it to malfunction

Connecting Angular directive values to controller objects

A tool that enhances the visibility and readability of web languages such as HTML, PHP, and CSS

Ways to monitor automatic data alterations within a Vue JS component

Updating JavaScript alert title in Android webview: A guide for developers

Breaking apart a string and mapping it to specific fields

Issue with PHP Ajax Image Upload

Enhance or Delete Dynamic linked select boxes in Laravel

Adjust the color of the sidebar's list items when scrolling

Implementing a JavaScript function to a button within an existing form in JSP - Best practices

Having difficulty uploading an image to Facebook through the graph API

What is the best way to refresh flexslider after it has been updated via AJAX?

How to implement various middlewares in Express.js depending on the current environment using NODE_ENV?

JavaScript codes within HTML elements may not be functional when using an AJAX loader to transition to the next page

Incorporating an HTML5 Theme with Angular 2

Creating an effective Google Login Button in a React application

Angular is notifying that an unused expression was found where it was expecting an assignment or function call

Struct object not found within nested array during JSON unmarshaling

How to retrieve and modify JSON data in Node.js using Stream with both Get and Post methods