Discover the route followed by an object containing a specific key within an array of objects

Question

Discover the route followed by an object containing a specific key within an array of objects

Imagine having an array of dictionaries like the one below. How can I locate the object with id: 121 using JavaScript? I've been struggling to figure this out and would appreciate any hints or algorithms on how to achieve this.

The desired result should look something like

[{id:1, name:"foo"}, {id: 12, name:"shoo"}, {id: 121, name:"jhj"}]

[
    {
        "id": 1,
        "name": "foo",
        "submenus": [
            {
                "id": 11,
                "name": "bar",
                "submenus": [
                    {
                        "id": 111,
                        "name": "abc"
                    }
                ]
            },
            {
                "id": 12,
                "name": "shoo",
                "submenus": [
                    {
                        "id": 121,
                        "name": "jhj"
                    }
                ]
            }
        ]
    },
    {
        "id": 2,
        "name": "kjk"
    }
]

This is the VueJS code snippet that I came up with:

getBreadcrumbs(menuItems, id, breadcrumbsArray) {
    for (var i = 0; i < menuItems.length; i++) {
      if (menuItems[i].id == id) {
        breadcrumbsArray.push({
          id: menuItems[i].id,
          name: menuItems[i].text
        })
        return breadcrumbsArray
      } else {
        if (menuItems[i].submenus !== 'undefined') {
          if (menuItems[i].submenus.length > 0) {
            console.log('shoo')
            this.getBreadcrumbs(menuItems[i].submenus, id, breadcrumbsArray)
          }
        }
      }
    }
  }

When running this code, it throws the following error:

Error in render: "TypeError: menuItems[i].submenus is undefined"

javascript algorithm vue.js

Answer 1

Answer №1

If you need to achieve a specific requirement, consider defining a recursive function called findPath(). Below are some explanatory notes on how to implement it:

const data=[{"id":1,"name":"foo","submenus":[{"id":11,"name":"bar","submenus":[{"id":111,"name":"abc"}]},{"id":12,"name":"shoo","submenus":[{"id":121,"name":"jhj"}]}]},{"id":2,"name":"kjk"}];

/* Implement a recursive function to locate the path from the root of the dataset to the first matching child with the specified id */
const findPath = (items, id) => {
    
    /* Iterate through the items at this level */
    for(const item of items) {

        if(item.id === id) {
            /* Return an array containing just this item if its id matches */
            return [item]
        }
        else if(Array.isArray(item.submenus)) {
            /* If there are submenus present, recursively search for a nested child with the matching id */
            const result = findPath(item.submenus, id)
            if(Array.isArray(result)) {
                /* Prefix the current item to the results array if a nested child with the id is found */
                return [item].concat(result)
            }
        }
    }
}

/* Map the id and name of each item in the found path to a result array */
const result = findPath(data, 121).map(({ id, name }) => ({ id, name }));

console.log( result );

Additionally, there is a minor error in the way you're checking for the existence of the submenus sub-array in your code.

To resolve this issue, you can make the following adjustment:

getBreadcrumbs(menuItems, id, breadcrumbsArray) {
    for (var i = 0; i < menuItems.length; i++) {
        if (menuItems[i].id == id) {

            breadcrumbsArray.push({
                id: menuItems[i].id,
                name: menuItems[i].text
            });

        } else {

            /* Check if "submenus" is defined using the "typeof" operator */
            if (typeof menuItems[i].submenus !== 'undefined') {
                if (menuItems[i].submenus.length > 0) {
                    this.getBreadcrumbs(menuItems[i].submenus, id, breadcrumbsArray)
                }
            }
        }
    }

    /* Place the return statement here */
    return breadcrumbsArray;
}

To learn more about the typeof operator, refer to this documentation

Answer 2

If you need to achieve a specific requirement, consider defining a recursive function called findPath(). Below are some explanatory notes on how to implement it:

const data=[{"id":1,"name":"foo","submenus":[{"id":11,"name":"bar","submenus":[{"id":111,"name":"abc"}]},{"id":12,"name":"shoo","submenus":[{"id":121,"name":"jhj"}]}]},{"id":2,"name":"kjk"}];

/* Implement a recursive function to locate the path from the root of the dataset to the first matching child with the specified id */
const findPath = (items, id) => {
    
    /* Iterate through the items at this level */
    for(const item of items) {

        if(item.id === id) {
            /* Return an array containing just this item if its id matches */
            return [item]
        }
        else if(Array.isArray(item.submenus)) {
            /* If there are submenus present, recursively search for a nested child with the matching id */
            const result = findPath(item.submenus, id)
            if(Array.isArray(result)) {
                /* Prefix the current item to the results array if a nested child with the id is found */
                return [item].concat(result)
            }
        }
    }
}

/* Map the id and name of each item in the found path to a result array */
const result = findPath(data, 121).map(({ id, name }) => ({ id, name }));

console.log( result );

Additionally, there is a minor error in the way you're checking for the existence of the submenus sub-array in your code.

To resolve this issue, you can make the following adjustment:

getBreadcrumbs(menuItems, id, breadcrumbsArray) {
    for (var i = 0; i < menuItems.length; i++) {
        if (menuItems[i].id == id) {

            breadcrumbsArray.push({
                id: menuItems[i].id,
                name: menuItems[i].text
            });

        } else {

            /* Check if "submenus" is defined using the "typeof" operator */
            if (typeof menuItems[i].submenus !== 'undefined') {
                if (menuItems[i].submenus.length > 0) {
                    this.getBreadcrumbs(menuItems[i].submenus, id, breadcrumbsArray)
                }
            }
        }
    }

    /* Place the return statement here */
    return breadcrumbsArray;
}

To learn more about the typeof operator, refer to this documentation

Answer 3

Answer №2

If you come across a path, grab an object related to the node and add it to the result set.

function findPath(array, target) {
    var path;
    return array.some(({ id, name, submenus = [] }) => {
            if (id === target) return path = [{ id, name }];
            var temp = findPath(submenus, target);
            if (temp.length) return path = [{ id, name }, ...temp];
        })
        ? path
        : [];
}

var array = [{ id: 1, name: "foo", submenus: [{ id: 11, name: "bar", submenus: [{ id: 111, name: "abc" }] }, { id: 12, name: "shoo", submenus: [{ id: 121, name: "jhj" }] }] }, { id: 2, name: "kjk" }];;

console.log(findPath(array, 121))

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 4

If you come across a path, grab an object related to the node and add it to the result set.

function findPath(array, target) {
    var path;
    return array.some(({ id, name, submenus = [] }) => {
            if (id === target) return path = [{ id, name }];
            var temp = findPath(submenus, target);
            if (temp.length) return path = [{ id, name }, ...temp];
        })
        ? path
        : [];
}

var array = [{ id: 1, name: "foo", submenus: [{ id: 11, name: "bar", submenus: [{ id: 111, name: "abc" }] }, { id: 12, name: "shoo", submenus: [{ id: 121, name: "jhj" }] }] }, { id: 2, name: "kjk" }];;

console.log(findPath(array, 121))

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 5

Answer №3

I've discovered a new method to achieve this task, and I wanted to share my algorithm with you:

To begin, conduct a DFS (Depth First Search) on your tree until the node with the corresponding id is located
Once the node is found, add it to the breadscrumpArray and return the entire array
Each time we explore a submenu element, we can determine whether the desired node is a child of that element or not. If it's not a child, the function getBreadcrumbs will return false

I hope this explanation helps clarify the process. Feel free to ask any questions in the comments section. Cheers!

function getBreadcrumbs(menuItems, id, breadcrumpsArray) {
    for (var i = 0; i < menuItems.length; i++) {
        if (menuItems[i].id == id) {
            // Node found, add it to the array and return
            breadcrumpsArray.push({
                id: menuItems[i].id,
                name: menuItems[i].name
            });
            return breadcrumpsArray;
        } else {
            if (typeof menuItems[i].submenus !== 'undefined') {
                if (menuItems[i].submenus.length > 0) {
                    if (getBreadcrumbs(menuItems[i].submenus, id, breadcrumpsArray)) {
                        // Add the node to the front of the array
                        breadcrumpsArray.unshift({
                            id: menuItems[i].id,
                            name: menuItems[i].name
                        });
                        return breadcrumpsArray;
                    }
                }
            } else {
                // The desired node is not part of this specific path in the tree
                return false;
            }
        }
    }
}

Answer 6

I've discovered a new method to achieve this task, and I wanted to share my algorithm with you:

To begin, conduct a DFS (Depth First Search) on your tree until the node with the corresponding id is located
Once the node is found, add it to the breadscrumpArray and return the entire array
Each time we explore a submenu element, we can determine whether the desired node is a child of that element or not. If it's not a child, the function getBreadcrumbs will return false

I hope this explanation helps clarify the process. Feel free to ask any questions in the comments section. Cheers!

function getBreadcrumbs(menuItems, id, breadcrumpsArray) {
    for (var i = 0; i < menuItems.length; i++) {
        if (menuItems[i].id == id) {
            // Node found, add it to the array and return
            breadcrumpsArray.push({
                id: menuItems[i].id,
                name: menuItems[i].name
            });
            return breadcrumpsArray;
        } else {
            if (typeof menuItems[i].submenus !== 'undefined') {
                if (menuItems[i].submenus.length > 0) {
                    if (getBreadcrumbs(menuItems[i].submenus, id, breadcrumpsArray)) {
                        // Add the node to the front of the array
                        breadcrumpsArray.unshift({
                            id: menuItems[i].id,
                            name: menuItems[i].name
                        });
                        return breadcrumpsArray;
                    }
                }
            } else {
                // The desired node is not part of this specific path in the tree
                return false;
            }
        }
    }
}

Discover the route followed by an object containing a specific key within an array of objects

Answer №1

Answer №2

Answer №3

Similar questions

Utilizing a library across various files in Node.js

The console displays "undefined" when formatting API data

In a Vue.js application, there is an issue with missing data in the Axios response headers

Create a soft focus on the background sans any filters

Display an array containing date objects in a dropdown menu for users to select from

I'm looking for a solution to implement a vertical carousel in Google's Materialize CSS without the need for custom development

To enable RTL in TextField, please note that the JssProvider is only available in "react-jss/src/JssProvider" and not in "react-jss/lib/JssProvider"

Send key-value pairs to the function using ng-model

To dismiss the Div, simply click on any area outside of it. Leveraging the power of SVG, D3

What is the best way to incorporate jQuery and its plugins into a Vue component?

Getting a boolean response from an asynchronous SQLite query in Express

Cease the clicking action event

Utilizing AngularJS to connect a dynamic result array to a table with varying layouts

Using AJAX to retrieve a specific JSON object from an array of JSON data

working with received data from a JavaScript object

I must eliminate any rows in a table that do not include the specified [string]

To prevent the background window from being active while the pop-up is open

Using React Higher Order Components to transmit data attributes to the initial child/element within the encapsulated component

Securing a REST API accessible through JavaScript by implementing authentication techniques due to the visibility of the public code

How can I trigger a click event on a link using JQuery?