Recursive function with an Object in JS

Question

I have an array that contains objects that might have nth levels of depth.

Something like this:

const settings = [

    {path: '/templates/pictures.php', url: '/pictures', label: 'Pictures', component: 'tab', template: 'default'},
    {path: '/templates/post-article.php', url: '/user/:username', component: 'table', template: 'default', children:[
        {path: '/templates/post-article-highlights.php', url: '/user/:username/highlights', component: 'table', template: 'default', children:[
              {path: '/templates/post-article-highlights.php', url: '/user/:username/highlights', component: 'table', template: 'default'}  

        ]}  
    ]}

]

I need to push on a different array only the 'Url' property and the children property if present, preserving the depth though.

So the new array should look like this:

const newArray = [

    {url: '/pictures'},
    {url: '/user/:username', children:[
        {url: '/user/:username/highlights', children:[
                {url: '/user/:username/highlights'} 
        ]}  
    ]}

]

Can you help me?

Thanks

Hi! Please take the tour and read through the help center, in particular How do I ask a good question? Do your research, search for related topics on SO, and give it a go. If you get stuck and can't get unstuck after doing more research and searching, post a minimal reproducible example of your attempt and say specifically where you're stuck. People will be glad to help. Good luck! — T.J. Crowder
– T.J. Crowder, Commented May 5, 2018 at 17:04

Nina Scholz · Accepted Answer · 2018-05-05 17:27:39Z

You could use a destructuring assignment for the wanted keys and use Array#map for getting a new array with only the one property and use Object.assign for the children objects by checking the children and if exist, take the urls from the children with a recursive call of the function.

function getUrls(array) {
    return array.map(({ url, children }) =>
        Object.assign({ url }, children && { children: getUrls(children) }));
}

var settings = [{ path: '/templates/pictures.php', url: '/pictures', label: 'Pictures', component: 'tab', template: 'default' }, { path: '/templates/post-article.php', url: '/user/:username', component: 'table', template: 'default', children: [{ path: '/templates/post-article-highlights.php', url: '/user/:username/highlights', component: 'table', template: 'default', children: [{ path: '/templates/post-article-highlights.php', url: '/user/:username/highlights', component: 'table', template: 'default' }] }] }],
    urls = getUrls(settings);

console.log(urls);

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

Walter Chapilliquen - wZVanG · Accepted Answer · 2018-05-05 17:23:11Z

1

const settings = [
    {path: '/templates/pictures.php', url: '/pictures', label: 'Pictures', component: 'tab', template: 'default'},
    {path: '/templates/post-article.php', url: '/user/:username', component: 'table', template: 'default', children:[
        {path: '/templates/post-article-highlights.php', url: '/user/:username/highlights', component: 'table', template: 'default', children:[
              {path: '/templates/post-article-highlights.php', url: '/user/:username/highlights', component: 'table', template: 'default'}  

        ]}  
    ]}
];


function childrenUrls(childrens){
	return childrens.reduce(function(arr, obj){
		var newObj = {url: obj.url};
		if(obj.children) newObj.children = childrenUrls(obj.children);
		return arr.push(newObj), arr;
	}, []);
}


const newArray = childrenUrls(settings);

console.log(newArray);

answered May 5, 2018 at 17:23

Walter Chapilliquen - wZVanG

12.1k8 gold badges44 silver badges64 bronze badges

1 Comment

Walter Chapilliquen - wZVanG Over a year ago

If you already working with the ES6 syntax, you can also use the @Nina Scholz solution

EugenSunic · Accepted Answer · 2018-05-05 18:05:45Z

0

Here is an easy and understandable approach along with a a fiddle example where you can test it further:

https://jsfiddle.net/eugensunic/pftkosb9/

function findArray(array) {
  var new_array = [];

  for (var i = 0; i < array.length; i++) {
    if (array[i].url) {
      let obj = {};
      obj['url'] = array[i].url;
      obj['children'] = array[i].children;

      new_array.push(obj);

    }
    if (Array.isArray(array[i].children)) {
      new_array = new_array.concat(findArray(array[i].children));
    }
  }
  return new_array;
}

console.log(findArray(settings));

answered May 5, 2018 at 18:05

EugenSunic

13.8k15 gold badges68 silver badges96 bronze badges

Collectives™ on Stack Overflow

Recursive function with an Object in JS

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related