Build tree array from flat array in JavaScript

Converting a flat array into a hierarchical tree structure is a common task when working with JSON data. This process transforms an array where each item has an id and parentId into a nested structure with parent-child relationships.

Every entry in the JSON array has:

• id ? a unique identifier

• parentId ? the id of the parent node (which is "0" for root nodes)

• level ? the depth level in the tree hierarchy

The JSON data is already ordered, meaning each entry will have its parent node or sibling above it, and child nodes or siblings below it.

Input Data Structure

Here's the flat array we need to convert:

const arr = [
    {
        "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
    }
];

Algorithm Implementation

The solution uses a two-pass approach: first creating a mapping of ids to array indices, then building the tree structure:

const arr = [
    {
        "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
    }
];

const listToTree = (arr = []) => {
    let map = {}, node, res = [], i;
    
    // First pass: create mapping and initialize children arrays
    for (i = 0; i < arr.length; i += 1) {
        map[arr[i].id] = i;
        arr[i].children = [];
    }
    
    // Second pass: build tree structure
    for (i = 0; i < arr.length; i += 1) {
        node = arr[i];
        if (node.parentId !== "0") {
            // Add to parent's children array
            arr[map[node.parentId]].children.push(node);
        } else {
            // Root node - add to result
            res.push(node);
        }
    }
    
    return res;
};

console.log(JSON.stringify(listToTree(arr), undefined, 4));

[
    {
        "id": "12",
        "parentId": "0",
        "text": "Man",
        "level": "1",
        "children": [
            {
                "id": "6",
                "parentId": "12",
                "text": "Boy",
                "level": "2",
                "children": []
            },
            {
                "id": "7",
                "parentId": "12",
                "text": "Other",
                "level": "2",
                "children": []
            }
        ]
    },
    {
        "id": "9",
        "parentId": "0",
        "text": "Woman",
        "level": "1",
        "children": [
            {
                "id": "11",
                "parentId": "9",
                "text": "Girl",
                "level": "2",
                "children": []
            }
        ]
    }
]

How It Works

The algorithm works in two main steps:

1. Mapping Phase: Creates a map object where keys are node IDs and values are their array indices. This allows O(1) lookup time when finding parent nodes.
2. Tree Building Phase: Iterates through each node and either adds it to its parent's children array or to the root result array if it's a top-level node (parentId === "0").

Key Points

• Time complexity: O(n) where n is the number of nodes
• Space complexity: O(n) for the mapping object and result tree
• The original array is modified in place to add the children arrays
• Root nodes are identified by having parentId equal to "0"

Conclusion

This approach efficiently converts flat arrays to tree structures using a mapping technique. The two-pass algorithm ensures O(n) time complexity, making it suitable for large datasets with hierarchical relationships.