Here is the JSON object I am working with:
categoryList = [{
"title": "Computers",
"categories":
[
{
"title": "Laptops",
"categories":
[
{
"title": "Ultrabooks",
"categories":
[
{
"title": "Lenovo",
"categories":
[
{
"title": "i5 intel"
}
]
}
]
},
{
"title": "Dell"
},
{
"title": "Macbooks",
"categories":
[
{
"title": "Air"
},
{
"title": "Pro"
}
]
}
]
},
{
"title": "Desktops"
},
{
"title": "Tablets",
"categories":
[
{
"title": "Apple"
},
{
"title": "Android"
}
]
},
{
"title": "Printers"
}
]
}]
This structured data allows for nested categories which can go on indefinitely. My goal is to display all of these categories, but I am struggling to find a solution.
Currently, my code only displays the first child in each category like so:
<template is="dom-repeat" items="{{categoryList}}" as="category">
<template is="dom-if" if="{{_hasData(category.categories)}}">
<div>{{category.title}}</div>
<template is="dom-repeat" items="{{category.categories}}" as="item">
<div>{{item.title}}</div>
</template>
</template>
</template>