Javascript of property path in object

Question

I am trying to find the path of property in an object in JavaScript. For example, given

var myObj = { 'a': {'b': {'c': {'x': 1, 'y': 2 }}} }

the path of 'x' in myObj would be a.b.c.x (dot notation).

I wrote the code below using a recursive mechanism.

function findPropPath(obj, name, currentPath) {
    var currentPath = currentPath || '';

    for (var i in obj)
    {
        if (i == name)
        {
            return name;
        }
        else if (obj[i] && typeof obj[i] == "object")
        {
            var result = findPropPath(obj[i], name, currentPath + '.' + i);
            if (result == name)
            {
                return currentPath += '.' + name;
            }
            else if (result && result.endsWith('.' + name)) {
                return result;
            }
        }
    }
}

It works as expected, I would like to know if it can be optimized or other better ways find property path. Also I assume the call stack size would grow for enormous object. Any review would be of great help!

Answer 1

Cyclic reference danger

Recursive property searches are dangerous because many objects used in javascript at some point have a reference to themselves. Eg the global object console.log(this.window === this); // displays true

You need to check or be sure that there are no cyclic references. A common method is to use the JSON.stringify function that will throw if an object is cyclic. This is a very inelegant method and will prevent you from finding the information you are after as you will not search if this fails.

The best way (unfortunately) is to store each object you iterate and then check every other object against that array of objects, ignoring all object you have already iterated.

More than one result

The second problem you have is that the search will find only one path, while there could be many paths that satisfy the requirement, the first result may not be the one you are after. If you use a callback to determine the matching result you can be a lot more adaptable. The callback can accept not only the key name, but the current path and the current object the key belongs to.

The function should return all paths that satisfy the condition set by the callback function.

Modernise

ES6 has been available in the majority of browsers for some time. It is best to use ES6 as it is a major improvement on ES5, not using it is a major No No if you plan on an IT career. If you are concerned about legacy browsers (especially that annoying thorn called IE11) you should use a transpiler (for example Babel) to ensure backward compatibility.

A rewrite

I present a modification that is safer and more versity and in two forms. One as a standalone function and the other as a prototype of Object.

function findPropPaths(obj, predicate) {  // The function 
    const discoveredObjects = []; // For checking for cyclic object
    const path = [];    // The current path being searched
    const results = []; // The array of paths that satify the predicate === true
    if (!obj && (typeof obj !== "object" || Array.isArray(obj))) {
        throw new TypeError("First argument of finPropPath is not the correct type Object");
    }
    if (typeof predicate !== "function") {
        throw new TypeError("Predicate is not a function");
    }
    (function find(obj) {
        for (const key of Object.keys(obj)) {  // use only enumrable own properties.
            if (predicate(key, path, obj) === true) {     // Found a path
                path.push(key);                // push the key
                results.push(path.join("."));  // Add the found path to results
                path.pop();                    // remove the key.
            }
            const o = obj[key];                 // The next object to be searched
            if (o && typeof o === "object" && ! Array.isArray(o)) {   // check for null then type object
                if (! discoveredObjects.find(obj => obj === o)) {  // check for cyclic link
                    path.push(key);
                    discoveredObjects.push(o);
                    find(o);
                    path.pop();
                }
            }
        }
    } (obj));
    return results;
}

Usage

Usage is simple

const arrayOfPaths = findPropPaths(myObj, key => key === "x");

The predicate takes the form of

function(key, path, obj) { 

Where key is the property name being tested, path is an array of property names up to the current object. obj is the current object the property key belongs to.

The function returns true if the test passes, and any other value if the test fails. Only paths that the predicate returns true for are returned in the array of paths found.

Example code

The function is very versatile and below it will find all paths to properties that are named "x" and the second search will find all paths named x and contain a string

    function findPropPaths(obj, predicate) {  // The function 
        const discoveredObjects = []; // For checking for cyclic object
        const path = [];    // The current path being searched
        const results = []; // The array of paths that satify the predicate === true
        if (!obj && (typeof obj !== "object" || Array.isArray(obj))) {
            throw new TypeError("First argument of finPropPath is not the correct type Object");
        }
        if (typeof predicate !== "function") {
            throw new TypeError("Predicate is not a function");
        }
        (function find(obj) {
            for (const key of Object.keys(obj)) {  // use only enumrable own properties.
                if (predicate(key, path, obj) === true) {     // Found a path
                    path.push(key);                // push the key
                    results.push(path.join("."));  // Add the found path to results
                    path.pop();                    // remove the key.
                }
                const o = obj[key];                 // The next object to be searched
                if (o && typeof o === "object" && ! Array.isArray(o)) {   // check for null then type object
                    if (! discoveredObjects.find(obj => obj === o)) {  // check for cyclic link
                        path.push(key);
                        discoveredObjects.push(o);
                        find(o);
                        path.pop();
                    }
                }
            }
        } (obj));
        return results;
    }

    // create test object. Sorry but for brevity I have made it all one line
    const myObj = { a:0, g : [0, 1, 2, 3, "x", {x : 0}], d : null, z: {  b: {  c: { x: { a : {x : 0, } },  y: 2  }, d: { x: "0", y: 2 } } } };
    // add self reference to test cyclic protection
    myObj.f = myObj;
    
    // find all paths to property name "x"
    const arrayOfPaths = findPropPaths(myObj,key => key === "x");
    console.log("All unique paths to 'x'");
    arrayOfPaths.forEach(path => console.log(path));
    

    // find all paths to property name "x" that has a string
    const res1 = findPropPaths(myObj,(key, path, obj) => key === "x" && typeof obj[key] === "string");
    console.log("All unique paths to property 'x' holding a string");
    res1.forEach(path => console.log(path));

As Object.prototype

As you are after a fundamental function you can chose to add it to the Object prototype thus making it available to all object.

Many here will throw their hands up and say "NO WAY", I expect this answer to get more downvotes than up simply because of this. But it is a valid way of using the language, and is better understood than hidden behind gasps of "No" and "Run for the hills the end is now".

If you do it the following way you make it easier to use in your code. But there are warnings.

Warning when adding to the prototype of basic objects

If you do however you must take some precautions. Do not use the function if it already exists as the source may be unknown thus unsafe. Ensure that the function can not be overwritten as the object prototype is global and could be hijacked. Ensure that it works, the last thing you want to do is add a prototype to a basic object that requires some form of vetting before use. It should be bulletproof or it should not end up on the object's prototype.

The object prototype form

if (Object.prototype.findPropPaths !== undefined) {
    throw new ReferenceError("The object prototype 'findPropPaths` already exists and may be of unknown origin and thus unsafe to use.");
} else {
    Object.defineProperty(Object.prototype, 'findPropPaths', {
        writable : false,       // During development you should have this as true if you are working
                                // in an environment that does not reset, or this will throw an error
        enumerable : false,     // You don't want this to be seen
        configurable : false,   // You don't want this to be changed.
        value : function(predicate) {  // The function 
            const discoveredObjects = []; // For checking for cyclic object
            const path = [];    // The current path being searched
            const results = []; // The array of paths that satify the predicate === true
            if (typeof predicate !== "function") { 
                throw new TypeError("Predicate is not a function");
            }
            (function find(obj) {
                for (const key of Object.keys(obj)) {  // use only enumerable own properties.
                    if (predicate(key, path, obj) === true) {     // Found a path
                        path.push(key);                // push the key
                        results.push(path.join("."));  // Add the found path to results
                        path.pop();                    // remove the key.
                    }
                    const o = obj[key];                 // The next object to be searched
                    if (o && typeof o === "object" && ! Array.isArray(o)) {   // check for null then type object
                        if (! discoveredObjects.find(obj => obj === o)) {  // check for cyclic link
                            path.push(key);
                            discoveredObjects.push(o);
                            find(o);
                            path.pop();
                        }
                    }
                }
            } (this));
            return results;
        }
    });
}

Answer 2

Please pick a consistent brace style.

i has the connotation of being an integer counter. I would pick a different variable name for iterating over the properties of an object.

I don't see any need for obj[i] && in the else if test.

If you use recursion properly, you shouldn't need to have a third parameter at all.

function findPropPath(obj, name) {
    for (var prop in obj) {
        if (prop == name) {
            return name;
        } else if (typeof obj[prop] == "object") {
            var result = findPropPath(obj[prop], name);
            if (result) {
                return prop + '.' + result;
            }
        }
    }
    return null;    // Not strictly needed, but good style
}

var myObj = {'a': {'b': {'c': {'x': 1, 'y': 2 }}}};
console.log(findPropPath(myObj, 'x'));

Answer 3

You gave a very helpful a.b.c.x example in English. Thank you. We can think of it as a unit test of sorts.

There are at least three cases you handle. You might offer unit tests that cover them.

Rather than accumulating currentPath as a string (with delimiters), you might prefer to accumulate it as a list of strings, and fill in dot delimiters as the last step, to reduce special casing.