Javascript Tree Structure to Array conversion

Question

I am working on a treeview and I build a simple Node-Class: It consists of a name and an array of children:

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

Now my aim is to create a function that returns an object like this:

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

I tried using a recursive method. It starts with an empty array and adds children until there are no more left:

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

But something with the recursive Treeview Function has to be wrong. When I create the tree and try to open it in the chrome dev console, it just shows a "5" instead of something like (5) [{…}, {…}, {…}, {…}, {…}]. What did I do wrong?

tree = recTreeview(parent, []);
tree;

Gabriele Petrioli · Accepted Answer · 2018-04-25 10:03:51Z

2

You are returning the result of the push and not the actual treeview.

As per the Array.prototype.push() docs

Return value
The new length property of the object upon which the method was called.

So instead of return treeview.push(...) do treeview.push(...) and then return treeview

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

  return treeview;
}

answered Apr 25, 2018 at 10:03

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

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

Collectives™ on Stack Overflow

Javascript Tree Structure to Array conversion

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related