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

I am attempting to trigger a mouseup event following a mousedown action

When the first element of an array is undefined, Angular's ngFor will not render anything

angularsjs state provider with multiple parameters

Retrieve the HTML contents of a cell that contains a checkbox with the value of "jquery"

Creating a sequence of dependent HTTP requests in Angular

Custom font not displaying on Chromecast receiver app

After converting from php/json, JavaScript produces a singular outcome

Choose a name to show when adding a new user in Firebase

Stop users from saving the page in Next.js

When querying parameters within a URL, you may encounter JavaScript (Node) errors

VueJS - Building a Form Template Within a Modal Component

Struggling to retrieve the value of a text field in Angular with Typescript

Stopping free jqgrid disabled toolbar buttons from reacting to mouse clicks can be achieved by implementing specific coding techniques that

Steps for creating a jQuery function that responds to changes in a text box value

Steps to avoid TypeError: e.target.getAttribute is not a function

Eliminate the Jquery Combobox

Store the active tab in AngularJS with Bootstrap to easily remember and display

Guide on receiving application/csp-report as json in an express application utilizing bodyParser

What is the best way to enhance the class following this condition in JavaScript?

Ways to retrieve a file from a specific location using fetch/axios?