Javascript Treeview, Array inside Array

Question

I am working on a treeview and I created a class Node, consisting of a name and a list of children.

class Node {
  constructor(name, childNodes) {
    this.name = name;
    this.childNodes = childNodes;
  }
}

I am trying to create an object looking like the object "tree" in the image below. Every Node has a attribute called "nodes" which is the childNode-Array. I got very close to creating the same tree, but in my version there is an extra "Array"-Layer around each of the Child nodes (see the recTreeview()-Element):

I am not sure how to fix this problem. The array has to be created to contain the childnodes. Here is the code where the treeview Element is created:

function recTreeview(currentNode, treeview) {
  var tempChildren = [];
  currentNode.children.forEach(child => {
    tempChildren.push(recTreeview(child, []));
  });
  treeview.push({
    text: currentNode.name,
    nodes: tempChildren
  });

  return treeview;
}

Is there anything I can do? Update: A Code-Snippet:

class Node {
  constructor(name, children) {
    this.children = children;
    this.name = name;
  }
}

function recTreeview(currentNode, treeview) {
  var tempChildren = [];
  currentNode.children.forEach(child => {
    tempChildren.push(recTreeview(child, []));
  });
  treeview.push({
    text: currentNode.name,
    nodes: tempChildren
  });

  return treeview;
}

child1 = new Node("child1", []);
child2 = new Node("child2", []);
parent = new Node("Parent", [child1, child2]);

var tree = [
  {
      text: "Parent 1",
      nodes: [
          {
              text: "Child 1"
          },
          {
              text: "Child 2"
          }
      ]
  }
];

<button onClick="console.log(recTreeview(parent, []));">Wrong</button>
<button onClick="console.log(tree);">Right</button>

so you want to filter all the arrays then create a child with those items inside then rinse and repeat till all items are handled — Joe Warner
– Joe Warner, Commented Apr 25, 2018 at 11:09
I'm afraid the code is too fragmentary for us to help you with such a specific problem. Please update your question with a minimal reproducible example demonstrating the problem, ideally a runnable one using Stack Snippets (the [<>] toolbar button; here's how to do one). — T.J. Crowder
– T.J. Crowder, Commented Apr 25, 2018 at 11:10
The extra array is comming from tempChildren.push(recTreeview(child, []));. Because you are pushing the return value of recTreeview (which is an array) to the children array tempChildren. I can't post an answer because I don't know what recTreeview is supposed to do and how to change the code — ibrahim mahrir
– ibrahim mahrir, Commented Apr 25, 2018 at 11:19
@Ibrahimmahrir Yes, thats exactly the problem. I just want it to be 1 array instead of an array inside an array. I added a runnable Code Snippet — Basti
– Basti, Commented Apr 25, 2018 at 11:23

ibrahim mahrir · Accepted Answer · 2018-04-25 11:32:20Z

2

The extra array is comming from tempChildren.push(recTreeview(child, []));. Because you are pushing the return value of recTreeview (which is an array) to the children array tempChildren.

Instead of pushing the new array to tempChildren, you should pass tempChildren as the parameter to recTreeview:

currentNode.children.forEach(child => {
    recTreeview(child, tempChildren);
});

So that the children will be pushed directly to the tempChildren array instead of getting wrapped in the extra array recTreeview is creating.

Example:

class Node {
  constructor(name, children) {
    this.children = children;
    this.name = name;
  }
}

function recTreeview(currentNode, treeview) {
  var tempChildren = [];
  currentNode.children.forEach(child => {
    recTreeview(child, tempChildren);
  });
  treeview.push({
    text: currentNode.name,
    nodes: tempChildren
  });

  return treeview;
}

child1 = new Node("child1", []);
child2 = new Node("child2", []);
parent = new Node("Parent", [child1, child2]);

var tree = [
  {
      text: "Parent 1",
      nodes: [
          {
              text: "Child 1"
          },
          {
              text: "Child 2"
          }
      ]
  }
];

<button onClick="console.log(recTreeview(parent, []));">Not Wrong Anymore</button>
<button onClick="console.log(tree);">Right</button>

Note:

If you want to get rid of that empty nodes array if there are no children, then change this:

treeview.push({
    text: currentNode.name,
    nodes: tempChildren
});

To:

var node = {
    text: currentNode.name
};
if(tempChildren.length) {
    node.nodes = tempChildren;
}
treeview.push(node);

Which only adds the nodes property if the tempChildren array is not empty.

edited Apr 25, 2018 at 11:32

answered Apr 25, 2018 at 11:24

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Basti Over a year ago

Thanks! That totally makes sense, you helped me a lot.

ibrahim mahrir Over a year ago

@Basti I've added a note regarding that empty nodes array. Check it out!

Collectives™ on Stack Overflow

Javascript Treeview, Array inside Array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related