I am facing a challenge with an undefined number of arrays that can be nested without limit. This is for the "filtering" section on a page where products are listed. However, I am struggling to dynamically create this structure on the HTML side.
[
{
"name": "Models",
"items": [
{
"name": "Fabric",
"fieldType": "checkbox",
"subCategories": []
},
{
"name": "Linen",
"fieldType": "checkbox",
"subCategories": [
{
"name": "Colored",
"fieldType": "checkbox",
"subCategories": []
},
{
"name": "Solid Color",
"fieldType": "checkbox",
"subCategories": [
{
"name": "Black",
"fieldType": "checkbox",
"subCategories": []
},
{
"name": "White",
"fieldType": "checkbox",
"subCategories": []
},
{
"name": "Red",
"fieldType": "checkbox",
"subCategories": []
}
]
}
]
}
]
},
{
"name": "Other",
"items": [
{
"name": "Radio Buttons",
"fieldType": "checkbox",
"subCategories": [
{
"name": "Radio 01",
"fieldType": "radio",
"subCategories": []
},
{
"name": "Radio 02",
"fieldType": "radio",
"subCategories": []
}
]
}
]
}
]
Looking at the "HTML" implementation, here's the code snippet.
<div class="filter-item">
<span class="filter-item-title">Models</span>
<ul>
<li>
<mat-checkbox color="primary">Fabric</mat-checkbox>
</li>
<li>
<mat-checkbox color="primary">Linen</mat-checkbox>
<ul>
<li><mat-checkbox color="primary">Colored</mat-checkbox></li>
<li>
<mat-checkbox color="primary">Solid Color</mat-checkbox>
<ul>
<li><mat-checkbox color="primary">Black</mat-checkbox></li>
<li><mat-checkbox color="primary">White</mat-checkbox></li>
<li><mat-checkbox color="primary">Red</mat-checkbox></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="filter-item">
<span class="filter-item-title">Other</span>
<ul>
<li>
<mat-checkbox color="primary">Radio Buttons</mat-checkbox>
<ul>
<li>
<mat-radio-group aria-label="Select an option">
<mat-radio-button color="primary" value="1">Radio 01</mat-radio-button>
<mat-radio-button color="primary" value="2">Radio 02</mat-radio-button>
</mat-radio-group>
</li>
</ul>
</li>
</ul>
</div>
Check out my live sample: https://stackblitz.com/edit/angular-yzdxca. Any insights you can offer would be greatly appreciated. Thank you.