遍历JavaScript数组

如何解决遍历JavaScript数组

我有以下数组

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

我想最好使用 forEach（）循环语句循环遍历此过程，以在Angular中重现以下内容。类别名称为标题，然后每个类别下的相应子类别。

<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> 

解决方法

您可以使用ng-for，但是在此之前，您需要重组类别以具有以下结构。

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> 

,

您可以像这样在for循环中进行

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