groupBy pipe function in angular 13 is not grouping my repeated values

Question

<ul class="nav sidebar-nav" id="side-menu">
      <li class="dropdown menuGroup" *ngFor="let menuItems of items">
        <a class="dropdown-toggle" data-bs-toggle="dropdown" id="dropdownMenuButton1" aria-expanded="false">
          <i class=""></i>
          <span class="menuCategory">{{menuItems.category.categoryText | groupBy: 'menuItems.category.categoryText' }}</span> 
        </a>
      </li>
</ul>

I am trying to group menuItems here from the json :

items:any = [
      {
        "text": "browncake",
        "itemCode": "browncake",
        "moduleCode": "CAKE",
        "category": {
          "categoryText": "Cakes"
        }
      },
      {
        "text": "Pastery",
        "itemCode": "Pastery",
        "moduleCode": "CAKE",
        "category": {
          "categoryText": "Cakes"
        }
      },
      {
        "text": "icecream",
        "itemCode": "icecream",
        "moduleCode": "ICE",
        "category": {
          "categoryText": "IceCream"
        }
      }
];

but i can see cakes twice and IceCream once ..... I want cake to get grouped and appear once so that final result will be one cake and one iceCream and not two cakes and one IceCream

I have used groupBy from ngx. please help me regarding grouping in *ngFor.

Answer 1

Try using filterBy from ngx-pipes https://www.npmjs.com/package/ngx-pipes#filterby

Answer 2

The search order is basically depth-first, left-to-right.

https://docs.python.org/3/tutorial/classes.html

However, because of the confusion it induces, it is generally bad form to write code like this. Multiple inheritance (beyond the very useful concept of a mix-in) is a dangerous practice that rarely pays in the long term.