Build tree array from flat array in javascript

Build tree array from flat array in javascript

I have a complex json file that I have to handle with javascript to make it hierarchical, in order to later build a tree.
Every entry of the json has :
id : a unique id,
parentId : the id of the parent node (which is 0 if the node is a root of the tree)
level : the level of depth in the tree
The json data is already “ordered”. I mean that an entry will have above itself a parent node or brother node, and under itself a child node or a brother node.
Input :
{
“People”: [
{
“id”: “12”,
“parentId”: “0”,
“text”: “Man”,
“level”: “1”,
“children”: null
},
{
“id”: “6”,
“parentId”: “12”,
“text”: “Boy”,
“level”: “2”,
“children”: null
},
{
“id”: “7”,
“parentId”: “12”,
“text”: “Other”,
“level”: “2”,
“children”: null
},
{
“id”: “9”,
“parentId”: “0”,
“text”: “Woman”,
“level”: “1”,
“children”: null
},
{
“id”: “11”,
“parentId”: “9”,
“text”: “Girl”,
“level”: “2”,
“children”: null
}
],
“Animals”: [
{
“id”: “5”,
“parentId”: “0”,
“text”: “Dog”,
“level”: “1”,
“children”: null
},
{
“id”: “8”,
“parentId”: “5”,
“text”: “Puppy”,
“level”: “2”,
“children”: null
},
{
“id”: “10”,
“parentId”: “13”,
“text”: “Cat”,
“level”: “1”,
“children”: null
},
{
“id”: “14”,
“parentId”: “13”,
“text”: “Kitten”,
“level”: “2”,
“children”: null
},
]
}

Expected output :
{
“People”: [
{
“id”: “12”,
“parentId”: “0”,
“text”: “Man”,
“level”: “1”,
“children”: [
{
“id”: “6”,
“parentId”: “12”,
“text”: “Boy”,
“level”: “2”,
“children”: null
},
{
“id”: “7”,
“parentId”: “12”,
“text”: “Other”,
“level”: “2”,
“children”: null
}
]
},
{
“id”: “9”,
“parentId”: “0”,
“text”: “Woman”,
“level”: “1”,
“children”:
{

“id”: “11”,
“parentId”: “9”,
“text”: “Girl”,
“level”: “2”,
“children”: null
}
}

],

“Animals”: [
{
“id”: “5”,
“parentId”: “0”,
“text”: “Dog”,
“level”: “1”,
“children”:
{
“id”: “8”,
“parentId”: “5”,
“text”: “Puppy”,
“level”: “2”,
“children”: null
}
},
{
“id”: “10”,
“parentId”: “13”,
“text”: “Cat”,
“level”: “1”,
“children”:
{
“id”: “14”,
“parentId”: “13”,
“text”: “Kitten”,
“level”: “2”,
“children”: null
}
}

]
}

Solutions/Answers:

Solution 1:

There is an efficient solution if you use a map-lookup. If the parents always come before their children you can merge the two for-loops. It supports multiple roots. It gives an error on dangling branches, but can be modified to ignore them. It doesn’t require a 3rd-party library. It’s, as far as I can tell, the fastest solution.

function list_to_tree(list) {
    var map = {}, node, roots = [], i;
    for (i = 0; i < list.length; i += 1) {
        map[list[i].id] = i; // initialize the map
        list[i].children = []; // initialize the children
    }
    for (i = 0; i < list.length; i += 1) {
        node = list[i];
        if (node.parentId !== "0") {
            // if you have dangling branches check that map[node.parentId] exists
            list[map[node.parentId]].children.push(node);
        } else {
            roots.push(node);
        }
    }
    return roots;
}

var entries = [
    {
        "id": "12",
        "parentId": "0",
        "text": "Man",
        "level": "1"
    }, { /*...*/ }
];

console.log(list_to_tree(entries));

If you’re into complexity theory this solution is Θ(n log(n)). The recursive-filter solution is Θ(n^2) which can be a problem for large data sets.

Solution 2:

As mentioned by @Sander, @Halcyon`s answer assumes a pre-sorted array, the following does not. (It does however assume you have loaded underscore.js – though it could be written in vanilla javascript):

Code

unflatten = function( array, parent, tree ){

    tree = typeof tree !== 'undefined' ? tree : [];
    parent = typeof parent !== 'undefined' ? parent : { id: 0 };

    var children = _.filter( array, function(child){ return child.parentid == parent.id; });

    if( !_.isEmpty( children )  ){
        if( parent.id == 0 ){
           tree = children;   
        }else{
           parent['children'] = children;
        }
        _.each( children, function( child ){ unflatten( array, child ) } );                    
    }

    return tree;
}

Requirements

It assumes the properties ‘id’ and ‘parentid’ indicate ID and parent ID respectively. There must be elements with parent ID 0, otherwise you get an empty array back. Orphaned elements and their descendants are ‘lost’

Example usage

//Array to convert to tree structure.
var arr = [
        {'id':1 ,'parentid' : 0},
        {'id':2 ,'parentid' : 1},
        {'id':3 ,'parentid' : 1},
        {'id':4 ,'parentid' : 2},
        {'id':5 ,'parentid' : 0},
        {'id':6 ,'parentid' : 0},
        {'id':7 ,'parentid' : 4}
];
tree = unflatten( arr );

JSFiddle

http://jsfiddle.net/LkkwH/1/

Solution 3:

Had the same problem, but I could not be certain that the data was sorted or not. I could not use a 3rd party library so this is just vanilla Js; Input data can be taken from @Stephen’s example;

function unflatten(arr) {
  var tree = [],
      mappedArr = {},
      arrElem,
      mappedElem; 

  // First map the nodes of the array to an object -> create a hash table.
  for(var i = 0, len = arr.length; i < len; i++) {
    arrElem = arr[i];
    mappedArr[arrElem.id] = arrElem;
    mappedArr[arrElem.id]['children'] = [];
  }


  for (var id in mappedArr) {
    if (mappedArr.hasOwnProperty(id)) {
      mappedElem = mappedArr[id];
      // If the element is not at the root level, add it to its parent array of children.
      if (mappedElem.parentid) {
        mappedArr[mappedElem['parentid']]['children'].push(mappedElem);
      }
      // If the element is at the root level, add it to first level elements array.
      else {
        tree.push(mappedElem);
      }
    }
  }
  return tree;
} 

JS Fiddle

Flat Array to Tree

Solution 4:

a more simple function list-to-tree-lite

npm install list-to-tree-lite

listToTree(list)

source:

function listToTree(data, options) {
    options = options || {};
    var ID_KEY = options.idKey || 'id';
    var PARENT_KEY = options.parentKey || 'parent';
    var CHILDREN_KEY = options.childrenKey || 'children';

    var tree = [],
        childrenOf = {};
    var item, id, parentId;

    for (var i = 0, length = data.length; i < length; i++) {
        item = data[i];
        id = item[ID_KEY];
        parentId = item[PARENT_KEY] || 0;
        // every item may have children
        childrenOf[id] = childrenOf[id] || [];
        // init its children
        item[CHILDREN_KEY] = childrenOf[id];
        if (parentId != 0) {
            // init its parent's children object
            childrenOf[parentId] = childrenOf[parentId] || [];
            // push it into its parent's children object
            childrenOf[parentId].push(item);
        } else {
            tree.push(item);
        }
    };

    return tree;
}

jsfiddle

Solution 5:

Very straightforward way to accomplish is

( BONUS1 : NODES MAY or MAY NOT BE ORDERED )

( BONUS2 : NO 3RD PARTY LIBRARY NEEDED, PLAIN JS )

const createDataTree = dataset => {
    let hashTable = Object.create(null)
    dataset.forEach( aData => hashTable[aData.ID] = { ...aData, childNodes : [] } )
    let dataTree = []
    dataset.forEach( aData => {
      if( aData.parentID ) hashTable[aData.parentID].childNodes.push(hashTable[aData.ID])
      else dataTree.push(hashTable[aData.ID])
    } )
    return dataTree
}

Here is the test for it, might help :

it('creates a correct shape of dataTree', () => {

    let dataSet = [
        {
            "ID": 1,
            "Phone": "(403) 125-2552",
            "City": "Coevorden",
            "Name": "Grady"
        },
        {
            "ID": 2,
            "parentID": 1,
            "Phone": "(979) 486-1932",
            "City": "Chełm",
            "Name": "Scarlet"
        }
    ]

    let expectedDataTree = [ 
    {
            "ID": 1,
            "Phone": "(403) 125-2552",
            "City": "Coevorden",
            "Name": "Grady",
            childNodes : [
                {
                    "ID": 2,
                    "parentID": 1,
                    "Phone": "(979) 486-1932",
                    "City": "Chełm",
                    "Name": "Scarlet",
                    childNodes : []
                }
            ]
    } 
    ]

  expect( createDataTree(dataSet) ).toEqual(expectedDataTree)
});

Solution 6:

You can handle this question with just two line coding:

_(flatArray).forEach(f=>
           {f.nodes=_(flatArray).filter(g=>g.parentId==f.id).value();});

var resultArray=_(flatArray).filter(f=>f.parentId==null).value();

Test Online (see the browser console for created tree)

Requirements:

1- Install lodash 4 (a Javascript library for manipulating objects and collections with performant methods => like the Linq in c#) Lodash

2- A flatArray like below:

    var flatArray=
    [{
      id:1,parentId:null,text:"parent1",nodes:[]
    }
   ,{
      id:2,parentId:null,text:"parent2",nodes:[]
    }
    ,
    {
      id:3,parentId:1,text:"childId3Parent1",nodes:[]
    }
    ,
    {
      id:4,parentId:1,text:"childId4Parent1",nodes:[]
    }
    ,
    {
      id:5,parentId:2,text:"childId5Parent2",nodes:[]
    }
    ,
    {
      id:6,parentId:2,text:"childId6Parent2",nodes:[]
    }
    ,
    {
      id:7,parentId:3,text:"childId7Parent3",nodes:[]
    }
    ,
    {
      id:8,parentId:5,text:"childId8Parent5",nodes:[]
    }];

Thank Mr. Bakhshabadi

Good luck