Question

I have a tree structure that has a node with a parent ID (unlimited child nodes). For display purposes I need this tree structure as a binary tree. How I do this is at each level nodes are grouped into a single node based upon a condition. When a node is selected its children are then displayed. Example:

The green is when the condition is true and red is false

B, C have been grouped into the left node and D, E are on the right based on their conditions.

QUESTION: I’m using KnockoutJS to display my tree and I need to be able to perform normal tree operations like getting a node based on its ID, inserting node(s) removing node(s). This is the structure I have. Is there a better structure/way of doing this?

var tree = [
    { groupNodeId: "A", childNodes: [
        { nodeId: "A", childGroupNodes: [
            { groupNodeId: "B", condition: true, childNodes: [
                { nodeId: "B", childGroupNodes: []},
                { nodeId: "C", childGroupNodes: []}
            ]},
            { groupNodeId: "D", condition: false, childNodes: [
                { nodeId: "D", childGroupNodes: []},
                { nodeId: "E", childGroupNodes: []}
            ]}
        ]}
    ]}
];

Answer 1

I’m not sure exactly what you want, but assuming that:

1. You want to insert “groupNodes”, not regular nodes, and that groupNodes can have unlimited children.
2. The original tree contains only regular nodes, not groupNodes.
3. All regular nodes have a nodeId, a condition set to true or false, and an array childNodes.
4. You don’t want to create groupNodes that would have no children.

then here’s your answer.

function binize(tree) {
  var left,right,t,u,
    stack=[tree];
  while(t=stack.pop()) {
    left=[];
    right=[];
    while(u=t.childNodes.pop()) {
      (u.condition?left:right).push(u);
      stack.push(u);
    }
    left.length&&t.childNodes.push({
      groupNodeId:left[0].nodeId,
      condition:true,
      childNodes:left
    });
    right.length&&t.childNodes.push({
      groupNodeId:right[0].nodeId,
      condition:false,
      childNodes:right
    });
  }
}

I tested it using this data structure (note that tree is the top level object, not an array containing it).

var tree={nodeId:'A',childNodes:[
  {nodeId:'B',condition:true,childNodes:[]},
  {nodeId:'C',condition:true,childNodes:[]},
  {nodeId:'D',condition:false,childNodes:[
    {nodeId:'F',condition:false,childNodes:[]},
    {nodeIf:'G',condition:false,childNodes:[]}
  ]},
  {nodeId:'E',condition:false,childNodes:[]}
]};

If I knew a little more about your tree then I might have taken a different approach. For example, if the tree isn’t very deep then it might be more efficient (and of course cleaner) to dig through it recursively.

Also, I have never used KnockoutJS before, and have no idea what structures it likes. I just generated the structures you indicated; hopefully that will work.