How to traverse between children in JavaScript to create breadcrumb UI from JSON ?

Traversing between children in JavaScript to create breadcrumb UI from JSON can be done in several ways, but one of the most efficient ways is to use recursion. A breadcrumb is a type of navigation that shows the user’s current location within a website or application. It is usually displayed as a series of links separated by a delimiter, such as “>” or “/”.  Recursion is a technique in which a function calls itself to perform a specific task. In this case, we will use recursion to traverse through the JSON object and build a breadcrumb UI.

Approach:

• Create a function that takes the JSON object and a path as parameters. The path parameter will keep track of the current location in the JSON object.
• Check if the current object has children. If it does, loop through each child and call the function again with the child object and the updated path.
• If the current object does not have children, add the current object to the breadcrumb UI and return.
• Continue this process until all objects have been processed.

Let’s look at example to understand this process better.

Example 1: Consider the following JSON data. In this example, we have used a recursive function traverse to loop through each child of the JSON data. The function takes two parameters: node and path. The node parameter is the current node being processed and the path parameter is an array that keeps track of the parent-child relationships.

If the current node doesn’t have any children, we add the path array to the breadcrumb array. If it has children, we call the traverse function again with the current node’s children as the node parameter and the updated path array.

Javascript

let data = {
    "home": {
        "about": {
            "team": {},
            "careers": {}
        },
        "services": {
            "web-development": {},
            "mobile-apps": {}
        }
    }
};

To create a breadcrumb UI from this JSON data, we can use the following code:

Javascript

let breadcrumb = [];

function traverse(node, path) {
    for (let key in node) {
        let newPath = path.concat(key);
        if (Object.keys(node[key]).length === 0) {
            breadcrumb.push(newPath);
        } else {
            traverse(node[key], newPath);
        }
    }
}

traverse(data, []);

console.log(breadcrumb);

Output:

[ [ "home", "about", "team" ], 
[ "home", "about", "careers" ], 
[ "home", "services", "web-development" ], 
[ "home", "services", "mobile-apps" ] ]

Example 2: Consider the following JSON data. In this example, the traverse function is called with the data object and an empty array as the path parameter. The function loops through each key in the current node and adds the key to the path array. If the current node has no children, the path array is added to the breadcrumb array. If the current node has children, the traverse function is called again with the child node and the updated path array.

Once the traverse function has finished looping through all the nodes, the breadcrumb array will contain all the parent-child relationships in the JSON data. This array can then be used to build the breadcrumb UI.

Javascript

let data = {
    "home": {
        "about": {
            "team": {
                "developers": {},
                "designers": {}
            },
            "careers": {}
        },
        "services": {
            "web-development": {},
            "mobile-apps": {}
        }
    }
};

To create a breadcrumb UI from this JSON data, we can use the following code:

Javascript

let breadcrumb = [];

function traverse(node, path) {
    for (let key in node) {
        let newPath = path.concat(key);
        if (Object.keys(node[key]).length === 0) {
            breadcrumb.push(newPath);
        } else {
            traverse(node[key], newPath);
        }
    }
}

traverse(data, []);

console.log(breadcrumb);

Output:  

[ [ "home", "about", "team", "developers" ], 
[ "home", "about", "team", "designers" ], 
[ "home", "about", "careers" ], 
[ "home", "services", "web-development" ], 
[ "home", "services", "mobile-apps" ] ]