Iteratively traverse the object to establish connections between parent and child elements

Question

Iteratively traverse the object to establish connections between parent and child elements

I've been working on creating a recursive function with some guidance I received here: looping through an object (tree) recursively

The goal is to traverse the object 'o' and generate a new one where each key is associated with its parents in the hierarchy.

Personally, recursion isn't my strong suit, so maybe you can give it a shot :-) ... if you're up for experimenting with actual data, you can find it here

function eachRecursive(obj) {
    for (var k in obj) {
        if (typeof obj[k] == "object" && obj[k] !== null ) {
            eachRecursive(obj[k])
        }
        else {
            // perform action to add to codes
        }
    }
}

var o = {
    "1": {
        name: "hi 1",
        children: {
            "1.1": {
                name: "hi 1.1",
                children: {
                    "1.1.1": {
                        name: "hi 1.1.1",
                        children: {}
                    }
                }
            },
            "1.2": {
                name: "hi 1.2",
                children: {}
            }
        }
    },
    "2": {
        name: "hi 2",
        children: {
            "2.1": {
                name: "hi 2.1",
                children: {}
            }
        }
    }
}

var codes = {}
eachRecursive(o)
console.log(codes)
// Desired output.
//{
//    "1": {
//        "name":"hi 1",
//        "parents":[]
//    },
//    "2": {
//        "name": "hi 2",
//        "parents": []
//    },
//    "1.1": {
//        "name": "hi 1.1",
//        "parents": ["1"]
//    },
//    "1.1.1": {
//        "name": "hi 1.1.1",
//        "parents": ["1", "1.1"]
//    },
//    "1.2": {
//        "name": "hi 1.2",
//        "parents": ["1"]
//    },
//    "2.1": {
//        "name": "hi 2.1",
//        "parents": ["2"]
//    }
//}

javascript json recursion

Answer 1

Answer №1

One possible solution is shown below:

function iterateThroughObject(obj) {
    return (function recurse(result, obj, parents) {
        for (var key in obj || {}) {
            result[key] = { name: obj[key].name, parents: [...parents] };
            recurse(result, obj[key].children, parents.concat(key));
        }
        return result;
    })({}, obj, []);
}


var exampleObject = {
    "1": {
        name: "hi 1",
        children: {
            "1.1": {
                name: "hi 1.1",
                children: {
                    "1.1.1": {
                        name: "hi 1.1.1",
                        children: {}
                    }
                }
            },
            "1.2": {
                name: "hi 1.2",
                children: {}
            }
        }
    },
    "2": {
        name: "hi 2",
        children: {
            "2.1": {
                name: "hi 2.1",
                children: {}
            }
        }
    }
}

var resultCodes = iterateThroughObject(exampleObject);
console.log(resultCodes);

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

Answer 2

One possible solution is shown below:

function iterateThroughObject(obj) {
    return (function recurse(result, obj, parents) {
        for (var key in obj || {}) {
            result[key] = { name: obj[key].name, parents: [...parents] };
            recurse(result, obj[key].children, parents.concat(key));
        }
        return result;
    })({}, obj, []);
}


var exampleObject = {
    "1": {
        name: "hi 1",
        children: {
            "1.1": {
                name: "hi 1.1",
                children: {
                    "1.1.1": {
                        name: "hi 1.1.1",
                        children: {}
                    }
                }
            },
            "1.2": {
                name: "hi 1.2",
                children: {}
            }
        }
    },
    "2": {
        name: "hi 2",
        children: {
            "2.1": {
                name: "hi 2.1",
                children: {}
            }
        }
    }
}

var resultCodes = iterateThroughObject(exampleObject);
console.log(resultCodes);

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

Answer 3

Answer №2

When approaching this task, it's important to consider the process step by step as if you were doing it manually.

If the item in question is an object: include the current node in the outcome, then recursively call the function with the expanded parents and the result.
If it's not an object: simply add it to the result.

A demo has been set up for you here: https://jsfiddle.net/11e8e4af/

function eachRecursive(obj) {
  var parents = arguments[1] || [];
  var result = arguments[2] || {};
  for (var k in obj) {
    if (obj.hasOwnProperty(k) && typeof obj[k] == "object" && obj[k] !== null ) {
      result[k] = {name:obj[k].name, parents:parents.slice()};
      eachRecursive(obj[k].children, parents.concat(k), result);
    } else {
      result[k] = {name:obj[k].name, parents:parents.slice()};
    }
  }
  return result;
}

Answer 4

When approaching this task, it's important to consider the process step by step as if you were doing it manually.

If the item in question is an object: include the current node in the outcome, then recursively call the function with the expanded parents and the result.
If it's not an object: simply add it to the result.

A demo has been set up for you here: https://jsfiddle.net/11e8e4af/

function eachRecursive(obj) {
  var parents = arguments[1] || [];
  var result = arguments[2] || {};
  for (var k in obj) {
    if (obj.hasOwnProperty(k) && typeof obj[k] == "object" && obj[k] !== null ) {
      result[k] = {name:obj[k].name, parents:parents.slice()};
      eachRecursive(obj[k].children, parents.concat(k), result);
    } else {
      result[k] = {name:obj[k].name, parents:parents.slice()};
    }
  }
  return result;
}

Iteratively traverse the object to establish connections between parent and child elements

Answer №1

Answer №2

Similar questions

Styling of Bootstrap HTML element not appearing as expected

Adding the "input-invalid" class to the input doesn't take effect until I click outside of the input field

Trying to retrieve JSON data from an API in VueJS and successfully logging the results, but struggling to render the data on the page. (I

Using perl ajax to modify a table

Angular 2 doesn't reflect changes in component variables in the view until mouseover happens

Adding existing tags to Select2 in Angular2 can be accomplished by following these steps:

Encountering a Node.js error when executing the JavaScript file

The Express server automatically shuts down following the completion of 5 GET requests

Configuring RingoJS to search for necessary modules within the node_modules folder

The && symbol in JSONPath: combining conditions efficiently

Retrieve particular JSON information on a single webpage by selecting an element on a separate page

Is there a way to extract information from an external XML document and incorporate it into an HTML file?

An unexpected issue occurred during runtime, specifically a TypeError stating that the function posts.map is not

How can the first character position be reached by moving the cursor using the jquery mask plugin?

When defining a stripe in TypeScript using process.env.STRIPE_SECRET_KEY, an error of "string | undefined" is encountered

Issues with Twitter-Bootstrap Modal Functionality

There seems to be a problem with the sorting functionality on the table in React JS,

AngularJS is throwing a $injector:modulerr error and I've exhausted all possible solutions

How come (23 == true) is incorrect but (!!23 == true) is correct? After all, there is === for exact comparisons

What methods can be used to continuously send data to another web page within my website using XMLHttpRequest()?