GroupBy... Am I using it wrong?

[mackelito]

I have an object like this:

{
    "data": {
        "cart": {
            "id": "d754932d-45e2-448f-baeb-b457aafd5ee3-47751",
            "orderItem": [
                {
                    "id": 956101,
                    "categoryPaths": [
                        {
                            "id": "6",
                            "title": "Skafferi"
                        },
                        {
                            "id": "48",
                            "title": "Flingor & Musli"
                        },
                        {
                            "id": "331",
                            "title": "Flingor"
                        }
                    ]
                },
                {
                    "id": 956106,
                    "categoryPaths": [
                        {
                            "id": "6",
                            "title": "Skafferi"
                        },
                        {
                            "id": "47",
                            "title": "Bönor, Linser & Fröer"
                        },
                        {
                            "id": "269",
                            "title": "Bönor"
                        }
                    ]
                },
                {
                    "id": 956107,
                    "categoryPaths": [
                        {
                            "id": "6",
                            "title": "Skafferi"
                        },
                        {
                            "id": "47",
                            "title": "Bönor, Linser & Fröer"
                        },
                        {
                            "id": "269",
                            "title": "Bönor"
                        }
                    ]
                }
            ]
        }
    }
}

Then mapping orderItems to cart.items.. all works fine.. then I do

<div *ngFor="let item of (cart.items | groupBy: 'categoryPaths.id' | pairs); trackBy: trackCartItem">{{item | json}}<div>

Now I was kind of hoping for some grouping magic but my object now looks more or less like this:

[
 "undefined",
 [
  {
    "externalId": "5053827193818",
    "title": "Special K Classic",
    "categoryPaths": [
      {
        "id": "6",
        "title": "Skafferi"
      },
      {
        "id": "48",
        "title": "Flingor & Musli"
      },
      {
        "id": "331",
        "title": "Flingor"
      }
    ]
  },
  {
    "externalId": "7350002402979",
    "title": "Svarta Bönor Ekologiska",
    "categoryPaths": [
      {
        "id": "6",
        "title": "Skafferi"
      },
      {
        "id": "47",
        "title": "Bönor, Linser & Fröer"
      },
      {
        "id": "269",
        "title": "Bönor"
      }
    ]
  },
  {
    "externalId": "7350002402948",
    "title": "Kidneybönor Ekologiska",
    "categoryPaths": [
      {
        "id": "6",
        "title": "Skafferi"
      },
      {
        "id": "47",
        "title": "Bönor, Linser & Fröer"
      },
      {
        "id": "269",
        "title": "Bönor"
      }
    ]
  }
 ]
]

What am I missing?

Note: This does what I expect (prints the tilte)...
but if I add | groupBy: 'categoryPaths.id' | keyvalue it behaves strange :)

      <div *ngFor="let item of cart.items; trackBy: trackCartItem">
        <div class="category" fxLayour="row" fxLayoutAlign="start center">
          <div class="title">{{ item.title }}</div>
        </div>
      </div>

[weilinzung]

Also, how do we use it on TS files? We need an example for this one.

this.groupByPipe.transform(this.data, 'categoryPaths.id'), but do I still need the parisPipe? And how to combie with pairsPipe?