Recently I started working with Angular, and I've created a service to iterate over nested JSON data for my list.
export const CATEGORIES: Category[] = [
{
id: 1,
categoryName:'Accessories',
subcatName: [
{subcategory: 'belts',}
],
},
{
id: 2,
categoryName:'Clothing',
subcatName: [
{subcategory: 'jeans'},
],
},
];
Additionally,
@Injectable()
export class CategoriesService {
constructor() { }
getCategories(): Category[]{
return CATEGORIES;
}
}
I'm currently attempting to display this data in my list using the following code:
<ul>
<li *ngFor="let cat of categoryList">
<a href="#">{{cat.categoryName}}</a>
<ul>
<li *ngFor="let subcat of categoryList">
<a href="#"> asdad {{subcat.subcategory}}</a>
</li>
</ul>
</li>
</ul>
To achieve this, I've included the following code in my component .ts file:
export class CategoriesComponent implements OnInit {
categoryList: Category[];
constructor(private categoryservice: CategoriesService) { }
ngOnInit() {
this.categoryList = this.categoryservice.getCategories();
}
}
I seek assistance in creating a navigation bar list of categories that reveals the relevant subcategories upon hover. Please don't hesitate to ask if you require any more details.