How to Recursively Build a JSON Tree Structure in JavaScript ?

To create a JSON tree structure recursively in JavaScript we need to create a recursive function that traverses the data and constructs the tree. We can create a JSON tree structure recursively in JavaScript using the below methods.

Using Arrays to build a JSON tree structure

In this method, we use JavaScript arrays to represent nodes in the tree structure. Arrays recursively build the tree by iterating over the data array and creating nodes for each item. If an item has children, it recursively calls the buildTree function to construct the children nodes.

Example: The below code recursively builds a JSON tree structure using JavaScript arrays.

Javascript

function buildTree(data, parentId = null) {
    let tree = [];
    data.forEach(item => {
        // Check if the item belongs to the current parent
        if (item.parentId === parentId) {
            // Recursively build the children of the current item
            let children = buildTree(data, item.id);
            // If children exist, assign them to the current item
            if (children.length) {
                item.children = children;
            }
            // Add the current item to the tree
            tree.push(item);
        }
    });
    return tree;
}

const data = [
    { id: 1, parentId: null, name: "Root" },
    { id: 2, parentId: 1, name: "Folder A" },
    { id: 3, parentId: 1, name: "Folder B" },
    { id: 4, parentId: 2, name: "File 1" },
    { id: 5, parentId: 2, name: "File 2" },
    { id: 6, parentId: 3, name: "File 3" }
];

const tree = buildTree(data);
console.log(JSON.stringify(tree, null, 2));

Output:

[
  {
    "id": 1,
    "parentId": null,
    "name": "Root",
    "children": [
      {
        "id": 2,
        "parentId": 1,
        "name": "Folder A",
        "children": [
          {
            "id": 4,
            "parentId": 2,
            "name": "File 1"
          },
          {
            "id": 5,
            "parentId": 2,
            "name": "File 2"
          }
        ]
      },
      {
        "id": 3,
        "parentId": 1,
        "name": "Folder B",
        "children": [
          {
            "id": 6,
            "parentId": 3,
            "name": "File 3"
          }
        ]
      }
    ]
  }
]

Using a Class to build a JSON tree structure

In this method, we define a Node class to represent each node in the tree structure. It recursively builds the tree by creating instances of the Node class for each item in the data array. If an item has children, it recursively calls the buildTree function to construct the children nodes.

Example : The below code recursively builds a JSON tree structure using JavaScript classes.

Javascript

class Node {
    constructor(id, parentId, name) {
        this.id = id;
        this.parentId = parentId;
        this.name = name;
        this.children = [];
    }
}

function buildTree(data, parentId = null) {
    const nodes = {};
    // Create nodes for each item in the data
    data.forEach(({ id, parentId, name }) => {
        nodes[id] = new Node(id, parentId, name);
    });
    const tree = [];
    Object.values(nodes).forEach(node => {
        // Check if the node belongs to the current parent
        if (node.parentId === parentId) {
            // Recursively build the children of the current node
            const children = buildTree(data, node.id);
            // Set the children of the current node
            node.children = children;
            // Add the current node to the tree
            tree.push(node);
        }
    });
    return tree;
}

const data = [
    { id: 1, parentId: null, name: "Root" },
    { id: 2, parentId: 1, name: "Section A" },
    { id: 3, parentId: 1, name: "Section B" },
    { id: 4, parentId: 2, name: "Page 1" },
    { id: 5, parentId: 2, name: "Page 2" },
    { id: 6, parentId: 3, name: "Page 3" }
];

const tree = buildTree(data);
console.log(JSON.stringify(tree, null, 2));

Output:

[
  {
    "id": 1,
    "parentId": null,
    "name": "Root",
    "children": [
      {
        "id": 2,
        "parentId": 1,
        "name": "Section A",
        "children": [
          {
            "id": 4,
            "parentId": 2,
            "name": "Page 1",
            "children": []
          },
          {
            "id": 5,
            "parentId": 2,
            "name": "Page 2",
            "children": []
          }
        ]
      },
      {
        "id": 3,
        "parentId": 1,
        "name": "Section B",
        "children": [
          {
            "id": 6,
            "parentId": 3,
            "name": "Page 3",
            "children": []
          }
        ]
      }
    ]
  }
]