Traverse a N-ary tree like structure in javascript

Question

I have following array with parent and its children. Level of parent and child is not fixed here. The count may vary and there can be more increase in depth of the tree:

[{
    "title": "26 - India",
    "tooltip": "26 - India",
    "children": [
      {
        "title": "026 - MH",
        "tooltip": "026 - MH",
        "children": [
          {
            "title": "2018",
            "tooltip": "2018",
            "children": []
          }
        ]},
      {
        "title": "026 - GJ",
        "tooltip": "026 - GJ",
        "children": [
          {
            "title": "2018",
            "tooltip": "2018",
            "children": []
          }
        ]},
      {
        "title": "026 - UP",
        "tooltip": "026 - UP",
        "children": [
          {
            "title": "2018",
            "tooltip": "2018",
            "children": []
          }
        ]}
    ]},
  {
    "title": "27 - USA",
    "tooltip": "27 - USA",
    "children": [
      {
        "title": "027 - SA",
        "tooltip": "027 - SA",
        "children": [
          {
            "title": "2018",
            "tooltip": "2018",
            "children": []
          }]
      }]
  }]

and looking for a result like :

26 - India & 026 - MH & 2018
26 - India & 026 - GJ & 2018
26 - India & 026 - UP & 2018
27 - USA & 027 - SA & 2018

where details of all the children with there parent will be shown. I am trying to use the following code to get the result :

var title= "";

searchTree(tree);
function searchTree(tree) {

  tree.map(function(item){
   if(item.children.length >0){
        title = title + " & "+ item.title;  
      searchTree(item.children)
    }
    else{
      title = title + " & " + item.title;
        console.log(title);
        title = "";
    }
  })
 }

But this results as follows :

& 26 - India & 026 - MH & 2018
& 026 - GJ & 2018
& 026 - UP & 2018
& 27 - USA & 027 - SA & 2018

The parent with more than one child is not recorded here.

Any help would be appreciated. Thanks in advance!

The posted question does not appear to include [any attempt](https://idownvotedbecau.se/noattempt/) at all to solve the problem. StackOverflow expects you to [try to solve your own problem first](https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users), as your attempts help us to better understand what you want. Please edit the question to show what you've tried, so as to illustrate a specific roadblock you're running into a [MCVE]. For more information, please see [ask] and take the [tour]. — CertainPerformance, Dec 27 '18 at 06:26
Possible duplicate of [Loop through an array in JavaScript](https://stackoverflow.com/questions/3010840/loop-through-an-array-in-javascript) — Cyrus, Dec 27 '18 at 06:28
It is little different from the specified one. Since, it has a nested children of mulitple parents — A.P, Dec 27 '18 at 07:45

score 1 · Accepted Answer · answered Dec 27 '18 at 08:30

You are on the right track, but i would suggest a few improvements:

When working with lists, use arrays for as long as possible. It makes your functions more flexible in the long run.
When working on recursive functions, passing a result list down is the easiest way to keep track of it all. Don't depend on global variables if you can avoid it.
Extending on the previous point, remember that non-simple variables like Arrays are passed by reference, not by copy. You can get around this by using Slice on your arrays before passing them.

Here is my take on your problem:

function overviewEndpoints(data, titles, endpoints) {
    if (titles === void 0) { titles = []; }
    if (endpoints === void 0) { endpoints = []; }
    titles.push(data.title);
    if (data.children.length > 0) {
        data.children
            .forEach(function (child) {
            overviewEndpoints(child, titles.slice(0), endpoints);
        });
    }
    else {
        endpoints.push(titles.slice(0));
    }
    return endpoints;
}
//TEST
var data = [
    {
        "title": "26 - India",
        "tooltip": "26 - India",
        "children": [
            {
                "title": "026 - MH",
                "tooltip": "026 - MH",
                "children": [
                    {
                        "title": "2018",
                        "tooltip": "2018",
                        "children": []
                    }
                ]
            },
            {
                "title": "026 - GJ",
                "tooltip": "026 - GJ",
                "children": [
                    {
                        "title": "2018",
                        "tooltip": "2018",
                        "children": []
                    }
                ]
            },
            {
                "title": "026 - UP",
                "tooltip": "026 - UP",
                "children": [
                    {
                        "title": "2018",
                        "tooltip": "2018",
                        "children": []
                    }
                ]
            }
        ]
    }, {
        "title": "27 - USA",
        "tooltip": "27 - USA",
        "children": [
            {
                "title": "027 - SA",
                "tooltip": "027 - SA",
                "children": [
                    {
                        "title": "2018",
                        "tooltip": "2018",
                        "children": []
                    }
                ]
            }
        ]
    }
];
console.log(data.map(function (a) { return overviewEndpoints(a).map(function (a) { return a.join(" & "); }).join("\n"); }).join("\n\n"));

Notice that i return as arrays, so i have more control over what results belong where and can easily modify the results.

Traverse a N-ary tree like structure in javascript

1 Answers1