Question

I wonder if there is a built in method to translate a JSON like below to a tree with ul’s and li’s.

Example JSON:

{
{parent=-1,id=0,name='root'},
{parent=0,id=1,name='x'},
{parent=0,id=2,name='y'},
{parent=1,id=3,name='z'},
{parent=1,id=4,name='w'},
{parent=1,id=5,name='c'},
{parent=2,id=6,name='d'}
}

Answer 1

Here is a function that I intentionally leave unexplained.

function buildNestedList(treeNodes, rootId) {
  var nodesByParent = {};

  $.each(treeNodes, function(i, node) {
    if (!(node.parent in nodesByParent)) nodesByParent[node.parent] = [];
    nodesByParent[node.parent].push(node);
  });

  function buildTree(children) {
    var $container = $("<ul>");

    if (!children) return;
    $.each(children, function(i, child) {
      $("<li>", {text: child.name})
      .appendTo($container)
      .append( buildTree(nodesByParent[child.id]) );
    });
    return $container;
  }
  return buildTree(nodesByParent[rootId]);
}

It turns this

var treeNodes = [
    {parent:-1,id:0,name:'root'},
    {parent:0,id:1,name:'x'},
    {parent:0,id:2,name:'y'},
    {parent:1,id:3,name:'z'},
    {parent:1,id:4,name:'w'},
    {parent:1,id:5,name:'c'},
    {parent:2,id:6,name:'d'}
];

into this

<ul>
  <li>x
    <ul>
      <li>z</li>
      <li>w</li>
      <li>c</li>
    </ul>
  </li>
  <li>y
    <ul>
      <li>d</li>
    </ul>
  </li>
</ul>

See it here: http://jsfiddle.net/Tomalak/uUBKf/