Continuously converting methods recursively until the array is fully processed

Question

Continuously converting methods recursively until the array is fully processed

My current code has a method that is not very efficient and does not scale well.

The object y is an array consisting of key/value pairs, each containing two properties:

1. A unique string property called name. This value is identified by the children property, which is another array of objects similar to y.


    for (var i = 0; i < y.length; i++) {
      let objx = y[i];
      let name = objx["name"];
      let inner = objx["children"];
    
      for (var j = 0; j < inner.length; j++) {
        var z = inner[j]["name"];
        let h = inner[j]["children"];
        console.log(h);
      }
    
      // More nested loops on the 'h' object will follow.
    }

I am wondering if there could be a more streamlined method that can generate a new collection containing all the name string properties until each respective children property returns a count of zero.

javascript typescript

Answer 1

Answer №1

const family = {
  name: 'parent',
  children: [
    {name: 'child1', children: []},
    {
      name: 'child2', children: [
        {name: 'grandChild1', children: []}
      ]
    },
  ]
};

const extractNames = family => [family.name, ...family.children.flatMap(extractNames)];
const allNames = extractNames(family);
console.log(allNames);

Answer 2

const family = {
  name: 'parent',
  children: [
    {name: 'child1', children: []},
    {
      name: 'child2', children: [
        {name: 'grandChild1', children: []}
      ]
    },
  ]
};

const extractNames = family => [family.name, ...family.children.flatMap(extractNames)];
const allNames = extractNames(family);
console.log(allNames);

Answer 3

Answer №2

A possible solution is to implement a recursive function.

const
    retrieveNames = array => array.flatMap(({ name, children }) => [name, ...retrieveNames(children)]);
    

var array = [{ name: 'parent', children: [{ name: 'child1', children: [] }, { name: 'child2', children: [{ name: 'grandChild1', children: [] }] }] }];

console.log(retrieveNames(array));

Answer 4

A possible solution is to implement a recursive function.

const
    retrieveNames = array => array.flatMap(({ name, children }) => [name, ...retrieveNames(children)]);
    

var array = [{ name: 'parent', children: [{ name: 'child1', children: [] }, { name: 'child2', children: [{ name: 'grandChild1', children: [] }] }] }];

console.log(retrieveNames(array));

Answer 5

Answer №3

This code demonstrates a simple example of recursion. The function recursively iterates over the data and calls itself with any children nodes that exist within the data structure.

var myData = [{
  name: 'bar',
  children: [{
    name: 'bar-1',
    children: [{
      name: 'bar-1-1'
    }]
  }, {
    name: 'bar-2',
    children: [{
      name: 'bar-2-1'
    }]
  }]
}]


function iterateOver(array, result) {
  array.forEach( function (data) {
    console.log(data.name)
    result.push(data.name)
    if (data.children) {
      return iterateOver(data.children, result)
    }
  })
  return result
}

console.log(iterateOver(myData, []))

Answer 6

This code demonstrates a simple example of recursion. The function recursively iterates over the data and calls itself with any children nodes that exist within the data structure.

var myData = [{
  name: 'bar',
  children: [{
    name: 'bar-1',
    children: [{
      name: 'bar-1-1'
    }]
  }, {
    name: 'bar-2',
    children: [{
      name: 'bar-2-1'
    }]
  }]
}]


function iterateOver(array, result) {
  array.forEach( function (data) {
    console.log(data.name)
    result.push(data.name)
    if (data.children) {
      return iterateOver(data.children, result)
    }
  })
  return result
}

console.log(iterateOver(myData, []))

Continuously converting methods recursively until the array is fully processed

Answer №1

Answer №2

Answer №3

Similar questions

Using Jquery to send json data to a webserver via Ajax (API)

The selected jQuery plugin is not functioning properly within CodeIgniter framework

Problems arising from the layout of the PrimeNG DataView component when used alongside Prime

How to Invoke a TypeScript Function in Angular 2 Using jQuery

What steps can be taken to choose a particular class when multiple classes share the same name?

Process called gulp useref eliminates certain files from the pipeline

Troubleshooting issues with calculator operators in JavaScript for beginners

unable to reset contact form functionality

Creating a definition for the use of sweet alerts within a service and incorporating them through

What is the process for choosing a specific id from a JSON structure?

Utilizing PHP Variables in an External JavaScript: A Step-by-Step Guide

The 'palette' property is not found on the Type 'Theme' within the MUI Property

Automatically navigate through form fields using jQuery when pasting data

Discover how to retrieve full response data by entering text into a text field using Reactjs

Identifying whether a Alphabet or a Digit has been Pressed - JavaScript

Setting field names and values dynamically in MongoDB can be achieved by using variables to dynamically build the update query

Is there a way to invoke a different function within a class from a callback function in an HTTP request?

Navigating through arrays to access nested objects

Activate the child for an update

Unable to execute redirect function in Next.js 14 application