create tree

HTML

<div class="output">

</div>

JavaScript

var comments = [
{id:1, parent_id: null, level:1, message:'top'},
{id:2, parent_id: null, level:1, message:'top'},
{id:3, parent_id:2, level:2, message:'top'},
{id:4, parent_id:3, level:3, message:'top'},
{id:5, parent_id:1, level:2, message:'top'},
{id:6, parent_id:5, level:3, message:'top'},
{id:7, parent_id:6, level:4, message:'top'}
];
 
function buildTree(array) {
	var tree = new Map();
  
  // sort array upside down so that bottom of the tree (lowest level) is at the top
  array.sort(function(a,b) {
    if (a.level < b.level) {
      return 1;
    } 

    if (a.level > b.level) {
      return -1;
    } 

    return 0;
  });
  
  // build map of all comments
  array.forEach(function(e, i) {
  		e.replies = new Map();
			tree.set(e.id, e);
	});

  // build tree from map
  for (var [key, value] of tree) {    
    if (value.parent_id !== null) {
      var parent = tree.get(value.parent_id);
			// add reply to parent
      parent.replies.set(key, value);
      // delete once added to it's parent
      tree.delete(key);
    }
  }
 
  return tree;
}