The data used in the demo is taken from the Morrisons website category menu.
<head>
<!-- Data -->
<script>
let data = [{
"Id": 104268,
"Name": "Fresh",
"Children": [
{
"Id": 113925,
"Name": "Vegetables",
"Children": [
{
"Id": 113955,
"Name": "Potatoes"
},
{
"Id": 113964,
"Name": "Onions, Leeks & Garlic"
}
]
}]},
{
"Id": 22594,
"Name": "Fruit"
}
]
</script>
<!-- show-tree lib -->
<script src="show-tree.js"></script>
<style>
#treeContainer {
overflow: auto;
height: 29rem;
border: 1px solid silver;
border-radius: .35rem;
background-color: #fff;
padding: .5rem;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
</style>
</head>
<body>
<div id="treeContainer">
</div>
<script>
showTree.start('treeContainer', data);
</script>
</body>