Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Traverse over tree type structured data uing JavaScript

I have a data set having parent and nested children in it. The purpose of this data is to traverse over parent to -> child1 to-> Child1Child …..
-> child2 to -> child1 to -> child2 to -> child3
-> child3 -> child4

enter image description here

Once the node end is reached start traversing reverse direction from end of node to start e.g. child2 where other children were left off and were not visited yet.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

Data Set in parent child relationship

[
            {
                "id": 0,
                "children": [
                    {
                        "id": 3,
                        "parentId": 0,
                        "children": [
                            {
                                "id": 6,
                                "parentId": 3,
                                "children": [
                                    {
                                        "id": 11,
                                        "parentId": 6,
                                        "children": [
                                            {
                                                "id": 10,
                                                "parentId": 11,
                                                "children": [
                                                    {
                                                        "id": 8,
                                                        "parentId": 10,
                                                    }
                                                ]
                                            }
                                        ]
                                    },
                                    {
                                        "id": 9,
                                        "parentId": 6,
                                        "children": [
                                            {
                                                "id": 1,
                                                "parentId": 9,
                                                "children": [
                                                    {
                                                        "id": 7,
                                                        "parentId": 1,
                                                    }
                                                ]
                                            }
                                        ]
                                    },
                                    {
                                        "id": 4,
                                        "parentId": 6,
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]



let result = [];
const handleTree = ( tree, count) => {
        count = count || 0
        const tree = _.clone(data);
        if( tree ){
            tree.forEach( ( t: any, i: string | number ) => {
                let deepCopy = _.clone({...t });
                delete deepCopy.children;
                const { id, parentId } = deepCopy
                result.push({ id, isVisited: true, parentId });
                if( tree[i].children ){
                    handleTree(tree[i].children, count+1 )
                }else{
                    //Completed start reading backward
                    // const getPreviousParent = findParentDetails(tree[i].parentId )

                }
            })
        }
}

How to approach this problem?
So far I have been able to read the data in the same direction but, getting some unexpected results while going backward.

I hope I have explained the question well and it is making sense. Suggestions are welcomed.

>Solution :

Some comments on your attempt:

  1. There is no need to clone anything when you destructure into primitives. Also the deletion of children from the clone would not be not needed.
  2. To get the items also added on the way back, just do the same thing (the exact same result.push) as on the way down.
  3. You don’t need i. Your loop variable is the node object that you need.
  4. There isn’t a use for the count in your code.
  5. If every output object gets a visited: true property, then it doesn’t really add any useful information.

For such a traversal, a generator comes in handy: that way you don’t enforce that the results are collected in an array — you leave it to the caller to decide what to do with the values and whether or not to abort the traversal.

You could also add a property that indicates what the direction was (down or up).

Here is a possible implementation:

// Define a generator
function* handleTree(tree) {
    for (const node of tree ?? []) {
        // No need to clone when you destructure into primitive values:
        const {id, parentId} = node;
        yield { id, parentId, direction: "down" }; // on the way down
        if (node.children) {
            yield* handleTree(node.children);
        }
        yield { id, parentId, direction: "up" }; // on the way up
    }
}

// Your example tree:
const tree = [{"id": 0,"children": [{"id": 3,"parentId": 0,"children": [{"id": 6,"parentId": 3,"children": [{"id": 11,"parentId": 6,"children": [{"id": 10,"parentId": 11,"children": [{"id": 8,"parentId": 10,}]}]},{"id": 9,"parentId": 6,"children": [{"id": 1,"parentId": 9,"children": [{"id": 7,"parentId": 1,}]}]},{"id": 4,"parentId": 6,}]}]}]}];
const result = [...handleTree(tree)]; // Collect into array
console.log(result);
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading