Looping through a JavaScript array

Question

I have the following Array

categories = [{"id_product_cat":1,"category":"food","id_product_sub_cat":1,"subcategory":"Pizza"},{"id_product_cat":1,"category":"food","id_product_sub_cat":2,"subcategory":"Burger"},{"id_product_cat":1,"category":"food","id_product_sub_cat":3,"subcategory":"Chicken"},{"id_product_cat":1,"category":"food","id_product_sub_cat":4,"subcategory":"Sandwiches"},{"id_product_cat":2,"category":"drinks ","id_product_sub_cat":5,"subcategory":"Beer"},{"id_product_cat":2,"category":"drinks ","id_product_sub_cat":6,"subcategory":"Wine"},{"id_product_cat":2,"category":"drinks ","id_product_sub_cat":7,"subcategory":"Liquor"},{"id_product_cat":2,"category":"drinks ","id_product_sub_cat":8,"subcategory":"Water"},{"id_product_cat":2,"category":"drinks ","id_product_sub_cat":9,"subcategory":"Juice"}]

And I would like to loop through this preferably using a forEach() loop statement to reproduce the following in Angular. Category Name as heading then the respective sub-categories under each Category.

<div class="col-sm-12 vertical-menu">
 <h5>Categories</h5>
 <div class="vert-menu-list">
 <h6>Food</h6>
 <ul>
 <li><a routerLink="/">Burgers</a> </li>
 <li><a routerLink="/">Chicken</a></li>
 <li><a routerLink="/">Pizzas</a></li>
 <li><a routerLink="/">Sandwich</a></li>
 </ul>
 <h6>Drinks</h6>
 <ul>
 <li><a routerLink="/">Beer</a> </li>
 <li><a routerLink="/">Wine</a></li>
 <li><a routerLink="/">Liquor</a></li>
 <li><a routerLink="/">Water</a></li>
 <li><a routerLink="/">Juice</a></li>
 </ul>
 </div>
 
 </div> 

• edddd: You could put them in <script> tags.

Answer 1

You can use ng-for, but before that you need to restructure the categories to have the following structure.

const categories = 
 [
 {
 category: "something", 
 subcategory: [
 {
 to:"somewhere", 
 label:"someString"
 }
 ]
 }
 ];

<div class="col-sm-12 vertical-menu">
 <h5>Categories</h5>
 <div class="vert-menu-list" *ngFor="category in categories">
 <h6>{{category.category}}</h6>
 <ul *ngIf="category.subcategory">
 <li *ngFor="subLink in category.subcategory">
 <a [routerLink]="subLink.to">
 {{subLink.label}}
 </a>
 </li>
 </ul>
 </div>
 </div> 

Answer 2

You can do for loop in angular like this

<div *ngFor="let item of items; let myIndex = index>
 {{myIndex}}
</div>