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.
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.
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.
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
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,);
}
}
}
