index.html
<html>
<body>
<div id="hierarchy"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
<script type="text/template" id="recursive-partial">
<ul>
{{#phyla}}
<li>{{name}}</li>
{{#classes}}
<ul>
<li>{{name}}</li>
{{#families}}
<ul>
<li>{{name}}</li>
</ul>
{{/families}}
</ul>
{{/classes}}
{{/phyla}}
</ul>
</script>
<script>
var template = $('#recursive-partial').html();
var data = {"phyla": [
{"name": "A", "classes": [
{"name": "Child A", "families": []},
{"name": "Child A2"},
{"name": "Child A3", "families": [
{"name": "Child A A3 1"},
{"name": "Child A A3 2"},
{"name": "Child A A3 3"},
{"name": "Child A A3 4"},
{"name": "Child A A3 5"}
]},
{"name": "Child A4", "families": [
{"name": "Child A A4 1"}
]}
]},
{"name": "", "classes": [
{"name": "Child B", "families": [
{"name": "Child B B1"},
{"name": "Child B B2"}
]},
{"name": "Child B2"},
{"name": "Child B3"},
{"name": "Child B4", "families": [
{"name": "Child B B4 1"}
]}
]},
]};
var html = Mustache.render(template, data);
$('#hierarchy').html(html);
</script>
</body>
</html>