Skip to content

Instantly share code, notes, and snippets.

@jczaplew

jczaplew/index.html

Forked from jrdmcgr/mustache-recursive.html
Last active August 29, 2015 13:56
Show Gist options
  • Save jczaplew/8963069 to your computer and use it in GitHub Desktop.
Save jczaplew/8963069 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<html>
<body>
<div id="hierarchy"></div>
<script src="http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment