Tips for locating a specific property deep within an array and pinpointing its exact location

Question

Tips for locating a specific property deep within an array and pinpointing its exact location

Is it possible to use JavaScript to locate a property within an array that is nested within another array and return its "path"?

Visualize a hierarchical group of nested arrays similar to this example:

    var bigBox = [  

        mediumBoxA = [
                smallBoxA = [                  
                         toyA = { toyId : "Blue Ball"},
                         toyb = { toyId : "Pink Ball"}
                    ],

                smallBoxB = [                  
                         toyA = { toyId : "Girl Doll"},
                         toyB = { toyId : "Boy Doll"}
                    ],
            ],

        mediumBoxB = [
                smallBoxA = [                  
                         toyA = { toyId : "Batman"},
                         toyB = { toyId : "Superman"}
                    ],

                smallBoxB = [                  
                         toyA = { toyId : "Lego"},
                         toyB = { toyId : "Soldier"}
                    ],
            ]

   ];

With that setup, I aim to be able to search for something like "Batman" in the console and find out that it is located in bigBox > mediumBoxB > smallBoxA > toyA. I'm specifically looking for a solution using only JavaScript and one that can be executed in the console without involving HTML.

I understand that I could use index numbers instead of labels like "smallBox", "toyB", etc., but I included those labels for clarity purposes.

Appreciate your help!

javascript arrays search

Answer 1

Answer №1

I have created a recursive function that is capable of identifying the path and presenting it as an array:

/**
 * Locates a value and provides the path of nested variable names
 * 
 * @param {obj}       The object to be searched within
 * @param {search}    The value being searched for
 * @param {variables} The relevant variable names or the context object
 * @param {context}   The context object in which to search for the variable names
 *
 * @return The identified path as an array or null if nothing is found
 */
function getPath(obj, search, variables, context) {

    if(context === undefined) {
        context = window;        
    }

    if(variables === undefined) {
        variables = window;
    }
    if(!Array.isArray(variables)) {
        // if variables is an object, this object becomes the context
        context = variables;
        // copy the keys into the variables array
        variables = [];
        for(var key in context) {
            if(context.hasOwnProperty(key)) {
                try {
                    // attempt to read property
                    context[key];
                    // add key to variable names
                    variables.push(key);
                } catch(e) {
                    // some properties of the window object may not be readable
                }
            }
        }
    }

    function getVariableName(variable) {
        for(var i = 0; i < variables.length; i++) {
            var name = variables[i];
            if(context[name] === variable) {
                // provide variable name
                return name;
            }
        }
        return null;
    }

    function _getPath(variable, path) {
        if(typeof variable === 'object') {
            var name = getVariableName(variable);
            if(name) {
                var pathCopy = path.slice(0);
                pathCopy.push(name);
                for(var key in variable) {
                    // call _getPath recursively
                    var returnedPath = _getPath(variable[key], pathCopy);
                    if(returnedPath) {
                        return returnedPath;
                    }
                }
            }            
        } else if(variable === search) {
            return path;
        }
        // If no match is found, return null
        return null;
    }

    // Initiate the recursive search for the value
    return _getPath(obj, []);
}

By using the getPath function, you can accomplish the following:

var path = getPath(bigBox, "Batman");
console.log(path.join(" > ")); // prints "bigBox > mediumBoxB > smallBoxC > toyE"

If all variables are stored in one object, you can also utilize the getPath function with an additional context argument like so:

var path = getPath(context.bigBox, "Batman", context);

I have modified the object bigBox slightly, ensuring each variable appears exactly once in the object.

Check out the jsFiddle demo here

Answer 2

I have created a recursive function that is capable of identifying the path and presenting it as an array:

/**
 * Locates a value and provides the path of nested variable names
 * 
 * @param {obj}       The object to be searched within
 * @param {search}    The value being searched for
 * @param {variables} The relevant variable names or the context object
 * @param {context}   The context object in which to search for the variable names
 *
 * @return The identified path as an array or null if nothing is found
 */
function getPath(obj, search, variables, context) {

    if(context === undefined) {
        context = window;        
    }

    if(variables === undefined) {
        variables = window;
    }
    if(!Array.isArray(variables)) {
        // if variables is an object, this object becomes the context
        context = variables;
        // copy the keys into the variables array
        variables = [];
        for(var key in context) {
            if(context.hasOwnProperty(key)) {
                try {
                    // attempt to read property
                    context[key];
                    // add key to variable names
                    variables.push(key);
                } catch(e) {
                    // some properties of the window object may not be readable
                }
            }
        }
    }

    function getVariableName(variable) {
        for(var i = 0; i < variables.length; i++) {
            var name = variables[i];
            if(context[name] === variable) {
                // provide variable name
                return name;
            }
        }
        return null;
    }

    function _getPath(variable, path) {
        if(typeof variable === 'object') {
            var name = getVariableName(variable);
            if(name) {
                var pathCopy = path.slice(0);
                pathCopy.push(name);
                for(var key in variable) {
                    // call _getPath recursively
                    var returnedPath = _getPath(variable[key], pathCopy);
                    if(returnedPath) {
                        return returnedPath;
                    }
                }
            }            
        } else if(variable === search) {
            return path;
        }
        // If no match is found, return null
        return null;
    }

    // Initiate the recursive search for the value
    return _getPath(obj, []);
}

By using the getPath function, you can accomplish the following:

var path = getPath(bigBox, "Batman");
console.log(path.join(" > ")); // prints "bigBox > mediumBoxB > smallBoxC > toyE"

If all variables are stored in one object, you can also utilize the getPath function with an additional context argument like so:

var path = getPath(context.bigBox, "Batman", context);

I have modified the object bigBox slightly, ensuring each variable appears exactly once in the object.

Check out the jsFiddle demo here

Answer 3

Answer №2

A tree can be traversed using enumeration to access each key and its respective name with the for x in y syntax. The key's name is contained in the value of X during each iteration. Create a search path by implementing your preferred recursive or iterative method for scanning the tree, then return the constructed path once you locate the desired value.

This approach represents a simple implementation strategy. While I cannot claim expertise in computer science, there may exist more efficient methods for conducting tree searches.

Answer 4

A tree can be traversed using enumeration to access each key and its respective name with the for x in y syntax. The key's name is contained in the value of X during each iteration. Create a search path by implementing your preferred recursive or iterative method for scanning the tree, then return the constructed path once you locate the desired value.

This approach represents a simple implementation strategy. While I cannot claim expertise in computer science, there may exist more efficient methods for conducting tree searches.

Tips for locating a specific property deep within an array and pinpointing its exact location

Answer №1

Check out the jsFiddle demo here

Answer №2

Similar questions

Discovering the magic of activating a JavaScript function on jQuery hover

Retrieving text from Node.js with the help of regular expressions

Utilizing a JavaScript class within the document ready function

React Material-UI Multiple Select with Checkboxes not displaying initial selections as checked

Unable to change data in table TD using AJAX and PHP received JSON array

Invoke a bounded function within an Angular directive using the ng-click event

The MIME type for .rar and .tar files is not specified

Unlocking numerical input solely by executing the specified command within the most up-to-date iteration of the Chrome Extension of Selenium IDE

Creating a border around a div element using JavaScript

Autocomplete causing issues with Mui visual display

Dealing with TSLint errors within the node_modules directory in Angular 2

Is there a streamlined method for grouping labeled data points that share similarities?

Setting the className in Next.js without using {styles.red} can be achieved by directly passing the

Connect chosen options from Multicombobox in personalized UI5 control

AngularJS: Updating data in controller but not reflecting in the HTML view

What is the reason why an increment expression cannot be on the left side of an assignment?

What are some ways to design unique custom data grid toolbar elements?

The data provided is not in the correct format for a timestamp

Creating an array of options for a jQuery plugin by parsing and populating

Immersive multimedia experience with HTML5 video interactivity