Skip to content

Add, remove and update elements in a JSON tree using JavaScript

Working with Tree structure is a norm these days. In JavaScript, it’s easy to work with JSON but not so with complex tree structures. But it’s always good to go with plain javascript to avoid dependencies. In this tutorial, let’s see how to insert, remove and update elements into a JSON tree using JavaScript.

Advertisements

Let’s take a sample tree structure as an example. This is a multilevel tree with four levels.

{
  "nodeId": 0,
  "level": 0,
  "children": [
    {
      "nodeId": 1,
      "level": 1,
      "children": [
        {
          "nodeId": 2,
          "level": 2,
          "children": [
            {
              "nodeId": 3,
              "level": 3,
              "children": [
                {
                  "nodeId": 4,
                  "level": 4,
                  "children": []
                },
                {
                  "nodeId": 5,
                  "level": 4,
                  "children": []
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

Retrieving an element

To retrieve a specific node from this tree, all we need is the nodeId. We have maintained nodeId as unique throughout the tree, so there’s no problem in fetching it. Just iterate through the tree recursively and once the nodeId is found, return it.

Advertisements
function getNodeFromTree(node, nodeId) {
    if (node.nodeId == nodeId) {
        return node;
    } else if (node.children != null) {
        var result = null;
        for (let i = 0; result == null && i < node.children.length; i++) {
            result = getNodeFromTree(node.children[i], nodeId);
        }
        return result;
    }
    return null;
}


//getNodeFromTree(tree, 4);
//{"nodeId":4,"level":4, "children": []}

Insert a new element

To insert a new element into this JSON tree, we need the parent node id and the new element. We are going to iterate through this and find the node id and push the new element into its children. Let’s say we are going to insert a new children to nodeId 5. The only logic needed here is to generate a new Id for the new node to be inserted.

 function insertNodeIntoTree(node, nodeId, newNode) {
    if (node.nodeId == nodeId) {
        // get new id
      	let n = 0;
        /** Your logic to generate new Id **/
       
        if (newNode) {
            newNode.nodeId = n;
            newNode.children = [];
            node.children.push(newNode);
        }

    } else if (node.children != null) {
        for (let i = 0; i < node.children.length; i++) {
            insertNodeIntoTree(node.children[i], nodeId, newNode);
        }

    }

}

// let newNode = {level:5};
// let newTree = insertNodeIntoTree(tree, 5, newNode);

I usually use a counter in the mongodb collection itself. The output tree would be:

{
  "nodeId": 0,
  "level": 0,
  "children": [
    {
      "nodeId": 1,
      "level": 1,
      "children": [
        {
          "nodeId": 2,
          "level": 2,
          "children": [
            {
              "nodeId": 3,
              "level": 3,
              "children": [
                {
                  "nodeId": 4,
                  "level": 4,
                  "children": []
                },
                {
                  "nodeId": 5,
                  "level": 4,
                  "children": [
                    {
                      "nodeId": 6,
                      "level": "5",
                      "children": []
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

Update an element in JSON Tree

Updating an element is straightforward. When you find your node, just change its properties.

See also  dangerouslySetInnerHTML Prop in React
Advertisements
function updateNodeInTree(node, nodeId, newNode) {
    if (node.nodeId == nodeId) {
        node.nodeName = newNode.nodeName;
    } else if (node.children != null) {
        for (let i = 0; i < node.children.length; i++) {
            result = updateNodeInTree(node.children[i], nodeId, newNode);
        }
    }
}

//Here I add a new property called nodeName.

Delete an element from JSON Tree

Advertisements

Removing an element from JSON tree is the easiest of the all. Just removed the element from children and reassign it to the children.

function deleteNodeFromTree(node, nodeId) {
    if (node.children != null) {
        for (let i = 0; i < node.children.length; i++) {
            let filtered = node.children.filter(f => f.nodeId == nodeId);
            if (filtered && filtered.length > 0) {
                node.children = node.children.filter(f => f.nodeId != nodeId);
                return;
            }
            deleteNodeFromTree(node.children[i], nodeId,);
        }
    }

}

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.