matthlavacka/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script>

<script id="jsbin-javascript">
const item = {"0":
  [{"id": 10,
    "title": "House",
    "level": 0,
    "children": [],
    "parent_id": null}],
 "1":
  [{"id": 12,
    "title": "Red Roof",
    "level": 1,
    "children": [],
    "parent_id": 10},
   {"id": 18,
    "title": "Blue Roof",
    "level": 1,
    "children": [],
    "parent_id": 10},
   {"id": 13,
    "title": "Wall",
    "level": 1,
    "children": [],
    "parent_id": 10}],
 "2":
  [{"id": 17,
    "title": "Blue Window",
    "level": 2,
    "children": [],
    "parent_id": 12},
   {"id": 16,
    "title": "Door",
    "level": 2,
    "children": [],
    "parent_id": 13},
   {"id": 15,
    "title": "Red Window",
    "level": 2,
    "children": [],
    "parent_id": 12}]};

var arr = _.flatten(_.values(item));

function buildTree(arr){
  var a=_.keyBy(arr, 'id')
  return _
   .chain(arr)
   .groupBy('parent_id')
   .forEach(function(v,k){
     console.log(a, v, k);
     k!=null && (a[k].children=(a[k].children||[]).concat(v));
   })
   .result(null)
   .value();
}

tree = buildTree( arr );
document.body.innerHTML = "<pre>" + (JSON.stringify(tree, null, " "));
</script>


<script id="jsbin-source-javascript" type="text/javascript">const item = {"0":
  [{"id": 10,
    "title": "House",
    "level": 0,
    "children": [],
    "parent_id": null}],
 "1":
  [{"id": 12,
    "title": "Red Roof",
    "level": 1,
    "children": [],
    "parent_id": 10},
   {"id": 18,
    "title": "Blue Roof",
    "level": 1,
    "children": [],
    "parent_id": 10},
   {"id": 13,
    "title": "Wall",
    "level": 1,
    "children": [],
    "parent_id": 10}],
 "2":
  [{"id": 17,
    "title": "Blue Window",
    "level": 2,
    "children": [],
    "parent_id": 12},
   {"id": 16,
    "title": "Door",
    "level": 2,
    "children": [],
    "parent_id": 13},
   {"id": 15,
    "title": "Red Window",
    "level": 2,
    "children": [],
    "parent_id": 12}]};

var arr = _.flatten(_.values(item));

function buildTree(arr){
  var a=_.keyBy(arr, 'id')
  return _
   .chain(arr)
   .groupBy('parent_id')
   .forEach(function(v,k){
     console.log(a, v, k);
     k!=null && (a[k].children=(a[k].children||[]).concat(v));
   })
   .result(null)
   .value();
}

tree = buildTree( arr );
document.body.innerHTML = "<pre>" + (JSON.stringify(tree, null, " "));</script></body>
</html>

## jsbin.cadutosope.js
const item = {"0":
  [{"id": 10,
    "title": "House",
    "level": 0,
    "children": [],
    "parent_id": null}],
 "1":
  [{"id": 12,
    "title": "Red Roof",
    "level": 1,
    "children": [],
    "parent_id": 10},
   {"id": 18,
    "title": "Blue Roof",
    "level": 1,
    "children": [],
    "parent_id": 10},
   {"id": 13,
    "title": "Wall",
    "level": 1,
    "children": [],
    "parent_id": 10}],
 "2":
  [{"id": 17,
    "title": "Blue Window",
    "level": 2,
    "children": [],
    "parent_id": 12},
   {"id": 16,
    "title": "Door",
    "level": 2,
    "children": [],
    "parent_id": 13},
   {"id": 15,
    "title": "Red Window",
    "level": 2,
    "children": [],
    "parent_id": 12}]};

var arr = _.flatten(_.values(item));

function buildTree(arr){
  var a=_.keyBy(arr, 'id')
  return _
   .chain(arr)
   .groupBy('parent_id')
   .forEach(function(v,k){
     console.log(a, v, k);
     k!=null && (a[k].children=(a[k].children||[]).concat(v));
   })
   .result(null)
   .value();
}

tree = buildTree( arr );
document.body.innerHTML = "<pre>" + (JSON.stringify(tree, null, " "));
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>
	<script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script>

	<script id="jsbin-javascript">
	const item = {"0":
	[{"id": 10,
	"title": "House",
	"level": 0,
	"children": [],
	"parent_id": null}],
	"1":
	[{"id": 12,
	"title": "Red Roof",
	"level": 1,
	"children": [],
	"parent_id": 10},
	{"id": 18,
	"title": "Blue Roof",
	"level": 1,
	"children": [],
	"parent_id": 10},
	{"id": 13,
	"title": "Wall",
	"level": 1,
	"children": [],
	"parent_id": 10}],
	"2":
	[{"id": 17,
	"title": "Blue Window",
	"level": 2,
	"children": [],
	"parent_id": 12},
	{"id": 16,
	"title": "Door",
	"level": 2,
	"children": [],
	"parent_id": 13},
	{"id": 15,
	"title": "Red Window",
	"level": 2,
	"children": [],
	"parent_id": 12}]};

	var arr = _.flatten(_.values(item));

	function buildTree(arr){
	var a=_.keyBy(arr, 'id')
	return _
	.chain(arr)
	.groupBy('parent_id')
	.forEach(function(v,k){
	console.log(a, v, k);
	k!=null && (a[k].children=(a[k].children\|\|[]).concat(v));
	})
	.result(null)
	.value();
	}

	tree = buildTree( arr );
	document.body.innerHTML = "<pre>" + (JSON.stringify(tree, null, " "));
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">const item = {"0":
	[{"id": 10,
	"title": "House",
	"level": 0,
	"children": [],
	"parent_id": null}],
	"1":
	[{"id": 12,
	"title": "Red Roof",
	"level": 1,
	"children": [],
	"parent_id": 10},
	{"id": 18,
	"title": "Blue Roof",
	"level": 1,
	"children": [],
	"parent_id": 10},
	{"id": 13,
	"title": "Wall",
	"level": 1,
	"children": [],
	"parent_id": 10}],
	"2":
	[{"id": 17,
	"title": "Blue Window",
	"level": 2,
	"children": [],
	"parent_id": 12},
	{"id": 16,
	"title": "Door",
	"level": 2,
	"children": [],
	"parent_id": 13},
	{"id": 15,
	"title": "Red Window",
	"level": 2,
	"children": [],
	"parent_id": 12}]};

	var arr = _.flatten(_.values(item));

	function buildTree(arr){
	var a=_.keyBy(arr, 'id')
	return _
	.chain(arr)
	.groupBy('parent_id')
	.forEach(function(v,k){
	console.log(a, v, k);
	k!=null && (a[k].children=(a[k].children\|\|[]).concat(v));
	})
	.result(null)
	.value();
	}

	tree = buildTree( arr );
	document.body.innerHTML = "<pre>" + (JSON.stringify(tree, null, " "));</script></body>
	</html>