Get deepest level children from nested objects in javascript

Question

I have 2 types of a objects, a group, and an item. A group can have children which is either an array of groups or an array of items.

I've ended up with a series of nested groups (which can be infinite levels deep) and I need to retrieve all the items, no matter how many levels deep, with only a group to work with.

Is there a way to retrieve all the items from the top-level group in the following data structure?

{
  type: 'group',
  children: [
    {
      type: 'group',
      children: [
        {
          type: 'group',
          children: [{type:'item'}, {type:'item'}, {type:'item'}]
        },
        {
          type: 'group',
          children: [{type:'item'}, {type:'item'}, {type:'item'}]
        },
        {
          type: 'group',
          children: [{type:'item'}, {type:'item'}, {type:'item'}]
        },
      ]
    },
    {
      type: 'group',
      children: [
        {
          type: 'group',
          children: [{type:'item'}]
        },
        {
          type: 'group',
          children: [{type:'item'}]
        },
        {
          type: 'group',
          children: [{type:'item'}]
        },
      ]
    },
    {
      type: 'group',
      children: [
        {
          type: 'group',
          children: [{type:'item'}, {type:'item'}]
        },
        {
          type: 'group',
          children: [{type:'item'}, {type:'item'}]
        },
        {
          type: 'group',
          children: [{type:'item'}, {type:'item'}]
        },
      ]
    },
  ]
}

your data structure is not valid. arrays have no property in a literal. — Nina Scholz
– Nina Scholz, Commented Mar 3, 2017 at 11:13
if you make it correct then use recursion tech to cater this. — Jai
– Jai, Commented Mar 3, 2017 at 11:15
As you won't have property labels available to you in an actual array, how will you differentiate between an array of group objects and array of item objects? If you can show an example of an actual array and include the group and item object definitions this might be easier. — Nope
– Nope, Commented Mar 3, 2017 at 11:18
btw, what qualifies a deep node? or would you like to get all nodes? — Nina Scholz
– Nina Scholz, Commented Mar 3, 2017 at 11:19

Nina Scholz · Accepted Answer · 2017-03-03 11:47:11Z

You could use an iterative with Array#reduce and recursive with calling iter again, approach.

var data = { children: [{ children: [{ children: [{ name: 'item1' }, { name: 'item2' }, { name: 'item3' }] }, { children: [{ name: 'item1' }, { name: 'item2' }, { name: 'item3' }] }, { children: [{ name: 'item1' }, { name: 'item2' }, { name: 'item3' }] }] }, { children: [{ children: [{ name: 'item1' }] }, { children: [{ name: 'item1' }] }, { children: [{ name: 'item1' }] }] }, { children: [{ children: [{ name: 'item1' }, { name: 'item2' }, { name: 'item3' }] }, { children: [{ name: 'item1' }, { name: 'item2' }, { name: 'item3' }] }, { children: [{ name: 'item1' }, { name: 'item2' }, { name: 'item3' }] }] }] },
    children = [data].reduce(function iter(r, a) {
        if (Array.isArray(a.children)) {
            return a.children.reduce(iter, r);
        }
        r.push(a);
        return r;
    }, []);

console.log(children);

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

cyr_x · Accepted Answer · 2017-03-03 11:25:23Z

You can achieve it with recursion.

var data = {
  children: [
    {
      children: [
        {
          children: [{ name: 'item1' }, { name: 'item2' }, { name: 'item3' }]
        },
        {
          children: [{ name: 'item1' }, { name: 'item2' }, { name: 'item3' }]
        },
        {
          children: [{ name: 'item1' }, { name: 'item2' }, { name: 'item3' }]
        }
      ]
    },
    {
      children: [
        {
          children: [{ name: 'item1' }]
        },
        {
          children: [{ name: 'item1' }]
        },
        {
          children: [{ name: 'item1' }]
        }
      ]
    },
    {
      children: [
        {
          children: [{ name: 'item1' }, { name: 'item2' }, { name: 'item3' }]
        },
        {
          children: [{ name: 'item1' }, { name: 'item2' }, { name: 'item3' }]
        },
        {
          children: [{ name: 'item1' }, { name: 'item2' }, { name: 'item3' }]
        }
      ]
    }
  ]
};


function getAllChildren(group, children) {
  children = children || [];
  if(group && Array.isArray(group.children)) {
    group.children.forEach(function(child) { 
      getAllChildren(child, children)
    });
  }
  else {
    children.push(group);
  }
  return children;
}

console.log(getAllChildren(data));

Collectives™ on Stack Overflow

Get deepest level children from nested objects in javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related