Build tree array from JSON in JavaScript

Building a tree structure from a flat array is a common task in JavaScript. When you have hierarchical data represented as a flat array with codes indicating parent-child relationships, you can transform it into a nested tree structure.

The Problem

Suppose we have the following flat array where the code property indicates hierarchy through dot notation:

const arr = [{
    "code": "2",
    "name": "PENDING"
},
{
    "code": "2.2",
    "name": "PENDING CHILDREN"
},
{
    "code": "2.2.01.01",
    "name": "PENDING CHILDREN CHILDREN"
},
{
    "code": "2.2.01.02",
    "name": "PENDING CHILDREN CHILDREN02"
},
{
    "code": "1",
    "name": "ACTIVE"
},
{
    "code": "1.1",
    "name": "ACTIVE CHILDREN"
},
{
    "code": "1.1.01",
    "name": "ACTIVE CHILDREN CHILDREN"
}];

Expected Output Structure

We need to transform this into a nested tree where child elements are grouped under their parent's children array:

[{
    "code": "2",
    "name": "PENDING",
    "children": [{
        "code": "2.2",
        "name": "PENDING CHILDREN",
        "children": [{
            "code": "2.2.01.01",
            "name": "PENDING CHILDREN CHILDREN"
        },
        {
            "code": "2.2.01.02",
            "name": "PENDING CHILDREN CHILDREN02"
        }]
    }]
},
{
    "code": "1",
    "name": "ACTIVE",
    "children": [{
        "code": "1.1",
        "name": "ACTIVE CHILDREN",
        "children": [{
            "code": "1.1.01",
            "name": "ACTIVE CHILDREN CHILDREN"
        }]
    }]
}]

Tree Building Algorithm

The solution uses a mapping approach that tracks hierarchy levels based on code length:

const arr = [{
    "code": "2",
    "name": "PENDING"
},
{
    "code": "2.2",
    "name": "PENDING CHILDREN"
},
{
    "code": "2.2.01.01",
    "name": "PENDING CHILDREN CHILDREN"
},
{
    "code": "2.2.01.02",
    "name": "PENDING CHILDREN CHILDREN02"
},
{
    "code": "1",
    "name": "ACTIVE"
},
{
    "code": "1.1",
    "name": "ACTIVE CHILDREN"
},
{
    "code": "1.1.01",
    "name": "ACTIVE CHILDREN CHILDREN"
}];

const transformToTree = (arr, root = '') => {
    let map = {}, last = [root], level = 0;
    map[root] = {};
    
    arr.forEach(el => {
        let parent = root;
        while (level && last[level].length >= el.code.length) {
            level--;
        }
        parent = last[level];
        level++;
        last.length = level;
        last.push(el.code);
        map[el.code] = el;
        map[parent].children = map[parent].children || [];
        map[parent].children.push(el);
    });
    
    return map[root].children;
};

console.log(JSON.stringify(transformToTree(arr), null, 2));

Output

[
  {
    "code": "2",
    "name": "PENDING",
    "children": [
      {
        "code": "2.2",
        "name": "PENDING CHILDREN",
        "children": [
          {
            "code": "2.2.01.01",
            "name": "PENDING CHILDREN CHILDREN"
          },
          {
            "code": "2.2.01.02",
            "name": "PENDING CHILDREN CHILDREN02"
          }
        ]
      }
    ]
  },
  {
    "code": "1",
    "name": "ACTIVE",
    "children": [
      {
        "code": "1.1",
        "name": "ACTIVE CHILDREN",
        "children": [
          {
            "code": "1.1.01",
            "name": "ACTIVE CHILDREN CHILDREN"
          }
        ]
      }
    ]
  }
]

How It Works

The algorithm maintains a map object to store references to all nodes and a last array to track the current hierarchy path. It determines parent-child relationships by comparing code lengths - shorter codes are parents of longer codes that start with the same pattern.

Key Points

• Uses code length to determine hierarchy levels
• Maintains a mapping structure for efficient parent lookup
• Dynamically creates children arrays as needed
• Works with any depth of nesting

Conclusion

This tree-building algorithm efficiently converts flat hierarchical data into nested structures. It's particularly useful for creating navigation menus, organizational charts, or any tree-like data visualization from flat JSON arrays.