Turn flat array into nested array using javascript

Question

I am looking to turn this flat array into an nested array but it keeps returning as empty. Not sure how to solve this one or what I am missing but this is driving me crazy.

Flat array:

var names =[
{ name: 'b', parent: 'Brown' },
{ name: 'a', parent: 'Brown' },
{ name: 'h', parent: 'Green' },
{ name: 'c', parent: 'Green' },
];

Desired output of array:

[{
    name: 'Brown',
    children: [{
            name: 'a',
            children: []
        },
        {
            name: 'b',
            children: []
        }
    ]
}, {
    name: 'Green',
        children: [{
                name: 'h',
                children: []
            },
            {
                name: 'c',
                children: []
            }
        ]
    }
}]

Js:

function getNestedChildren(arr, parent) {
    var children = [];
    for(var i =0; i < arr.length; ++i) {
        if(arr[i].parent == parent) {
            var grandChildren = getNestedChildren(arr, arr[i].name)

            if(grandChildren.length) {
                arr[i].children = grandChildren;
            }
            children.push( arr[i]);
        }
    }
    return children;
}
var nest = getNestedChildren(names, names.parent);
console.log( nest);

var nest = getNestedChildren(names, names.parent); what is names.parent? undefined? — ASDFGerte
– ASDFGerte, Commented May 2, 2018 at 15:38
you have to loop through the names and call parent for each one names[0].parent (otherwise its undefined) — Luke Gaskell
– Luke Gaskell, Commented May 2, 2018 at 15:40
I am trying to get to the root level of the array. Any thoughts? — user992731
– user992731, Commented May 2, 2018 at 15:40
@user992731 use 0 to get the root level. See my answer below — dikuw
– dikuw, Commented May 2, 2018 at 15:41
Also, this might be interesting for you: how-to-group-an-array-of-objects-by-key (copied wrong link first, edited) — ASDFGerte
– ASDFGerte, Commented May 2, 2018 at 15:43

LellisMoon · Accepted Answer · 2018-05-02 15:53:52Z

1

var names =[
{ name: 'b', parent: 'Brown' },
{ name: 'a', parent: 'Brown' },
{ name: 'h', parent: 'Green' },
{ name: 'c', parent: 'Green' },
{ name: 'j', parent: 'Brown' }
];

function groupBy(arr, f) {
  return arr.reduce((r, v, i, a, k = f(v)) => ((r[k] || (r[k] = [])).push(v), r), {});
}

function nestArray(array){
  var newArray=[],
      resultGrouped = groupBy(names, function(c) {
    return c.parent
  });
  
  for (var key in resultGrouped){
    var item=resultGrouped[key];
    
    newArray.push({
      name:key,
      children:item.map(function(map){
        delete map.parent;
        map.children=[];
        return map;
      })
    });
  }
  
  return newArray;
}
console.log(nestArray(names));

answered May 2, 2018 at 15:53

LellisMoon

5,0282 gold badges14 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tiago Coelho · Accepted Answer · 2018-05-02 16:03:33Z

1

You can create a new object, for each item assign an array to a key with the parent name, and concatenate the item to that array

var names =[
{ name: 'b', parent: 'Brown' },
{ name: 'a', parent: 'Brown' },
{ name: 'h', parent: 'Green' },
{ name: 'c', parent: 'Green' },
];

const getGroup=(groups, parent) => {
  let group = groups.find(g=>g.parent===parent);
  if(!group){
    group=({parent,children:[]});
    groups.push(group);
  }
  return group;
}

let  grouped = []
 names.forEach(item=> getGroup(grouped,item.parent).children.push(item))
 
                             
console.log(grouped)

edited May 2, 2018 at 16:03

answered May 2, 2018 at 15:51

Tiago Coelho

5,10313 silver badges17 bronze badges

1 Comment

Mark Over a year ago

Your results don't look like the OP's desired result.

Luke Gaskell · Accepted Answer · 2018-05-02 16:53:44Z

So for starters, you need to loop through the names and send each parent to your getNestedChildren() function.

var names =[
    { name: 'b', parent: 'Brown' },
    { name: 'a', parent: 'Brown' },
    { name: 'h', parent: 'Green' },
    { name: 'c', parent: 'Green' },
];

var nest = [];

for (var i = 0; i < names.length; i++) {
    nest.push(getNestedChildren(names, names[i].parent));
}

Also your getNestedChildren() is currently trying to modify and send back the old names array. I'd suggest creating a new object instead and send back the object with the children on it.

function getNestedChildren(arr, parent) {
    var children = [];
    var parentObj = {};
    parentObj.name = parent;
    for(var i =0; i < arr.length; ++i) {
        if(arr[i].parent == parent) {
            children.push(getNestedChildren(arr, arr[i].name));
        }
    }
    parentObj.children = children;
    return parentObj;
}

Collectives™ on Stack Overflow

Turn flat array into nested array using javascript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

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

Linked

Related