Recursive iteration from json data to tree

Question

I am trying to iterate through json object and build a treeview structure through a hierarchical structered object. I have the following code but i dont get FFF and GGG nodes. Any ideas please ?

    var html = {
    ul: '<ul></ul>',
    li: '<li></li>',
    span: '<span></span>'
};

function TreeView(jobj) {
    var node = jobj.data[0].Nodes[0];
    var $ul_root = $(html.ul),
        $li_root = $(html.li);
    var $span = $(html.span);
    $span.text(node.Key);
    $li_root.append($span);
    $ul_root.append($li_root);
    $.each(node.Nodes, function (i, n) {
        var $ul_parent = $(html.ul),
            $li_parent = $(html.li);
        var $span = $(html.span);
        $span.text(n.Key);
        $li_parent.append($span);
        $ul_parent.append($li_parent);
        $li_root.append($ul_parent);
        recursive(n.Nodes, $li_parent);
    })
    return $ul_root;

    function recursive(TreeNodes, $li_parent) {
          if (TreeNodes.length > 0) {
              var $ul_child = $(html.ul),
                  $li_child = $(html.li);
              var   $span = $(html.span);
              for (var i in n = TreeNodes) {
                  $span.text(n[i].Key);
                  $li_child.append($span);
                  $ul_child.append($li_child);
                  $li_parent.append($ul_child);
                  return recursive(n[i].Nodes, $li_child);
              }
          }
    }
}

var json = '{"data":[{"Nodes":[{"Key":"Root","Nodes":[{"Key":"AAA","Nodes":[{"Key":"BBB","Nodes":[{"Key":"CCC","Nodes":[]}]}]},{"Key":"SubRoot","Nodes":[{"Key":"DDD","Nodes":[{"Key":"EEE","Nodes":[]},{"Key":"FFF","Nodes":[{"Key":"GGG","Nodes":[]}]}]}]}]}]}]}';
var jobj = eval('(' + json + ')');
$('#tree').append(TreeView(jobj));

Any particular reason you're using eval instead of JSON.parse()? — Tibrogargan
– Tibrogargan, Commented Jan 15, 2018 at 8:48
eval has any number of issues that make it very difficult to use effectively. Might want to avoid it. See Why is Using the JavaScript Eval Function a Bad Idea? — Tibrogargan
– Tibrogargan, Commented Jan 15, 2018 at 9:23

Kaddath · Accepted Answer · 2018-01-15 09:10:23Z

2

The reason is pretty simple, and illustrates than one must be careful about details in the code:

in the recursive function, when you return, it just stops the execution of current function, so when you have more than one node, only the first is processed. Just remove the return.

Someone also posted a message and deleted it, but he was right. You also create only one element to append, and you modify it for second node instead of creating another one, so you'll have only the last value displayed. Move the initialisation of the elements to append to the DOM inside the loop.

I also removed the var n that seemed useless. (if you used it to copy for not keeping the reference, that won't work, the reference is kept in n too)

Change the function to:

function recursive(TreeNodes, $li_parent) {
      if (TreeNodes.length > 0) {
          var $ul_child, $li_child, $span, i;
          for (i in TreeNodes) {
              $span = $(html.span);
              $ul_child = $(html.ul);
              $li_child = $(html.li);
              $span.text(TreeNodes[i].Key);
              $li_child.append($span);
              $ul_child.append($li_child);
              $li_parent.append($ul_child);
              recursive(TreeNodes[i].Nodes, $li_child);
          }
      }
}

answered Jan 15, 2018 at 9:10

Kaddath

6,1511 gold badge11 silver badges24 bronze badges

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

2 Comments

Tibrogargan Over a year ago

Using a single span and attempting to .append it twice wasn't going to work, but it wasn't the cause of the problem - so not a correct answer. (Neither are using the same name for variables in multiple scopes as well as for object members, arbitrarily prefixing some of your variable names with "$", and capitalizing variable names)

Kaddath Over a year ago

I just corrected the OP's code specific problems that made it not working.. Even if i tend to agree with you in what you say, variable naming is more an opinion-based topic, so i kept it as it was

Collectives™ on Stack Overflow

Recursive iteration from json data to tree

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