title: Ionic 2 (Angular) GroupBy Pipe
body: <p>I'm having a trouble grouping my objects, I'm trying to use the ngx-group-by pipe but it doesn't seem to solve my problem.</p>
  
  <p>Assuming the data structure is :
  Every company has it products (which contains sub products), and it prices;
  For example our company is XXX and it sales cars and motorcycles: 
  <br>
  Products : TwoWheels , FourWheels
  <br>
  SubProducts : Bike,Motorcycle (TwoWheels) , Cars (FourWheels)
  <br>
  I'm trying to display the price for every SubProduct and group it by the ProductId
  Here's my Json:</p>
  
  <pre class="lang-json prettyprint-override"><code>{
    "id": 1,
    "firstName": "test",
    "lastName": "tast",
    "displayName": "myname",
    "profilePic": "none",
    "location": "mylocation",
    "pricingList": [
      {
        "id": 1,
        "userId": 1,
        "ProductId": 1,
        "subProductId": 1,
        "price": 50,
        "subProduct": {
          "id": 1,
          "ProductId": 1,
          "name": "MotorCycle",
          "treatment": {
            "id": 1,
            "name": "TwoWheels"
          }
        },
        "Product": {
          "id": 1,
          "name": "TwoWheels"
        }
      },
      {
        "id": 2,
        "userId": 1,
        "ProductId": 1,
        "subTreatmentId": 7,
        "price": 50,
        "subProduct": {
          "id": 7,
          "ProductId": 1,
          "name": "bike",
          "Product": {
            "id": 1,
            "name": "TwoWheels"
          }
        },
        "Product": {
          "id": 1,
          "name": "TwoWheels"
        }
      },
      {
        "id": 3,
        "userId": 1,
        "ProductId": 2,
        "subTreatmentId": 8,
        "price": 30,
        "subProduct": {
          "id": 8,
          "treatmentId": 2,
          "name": "Car",
          "Product": {
            "id": 2,
            "name": "FourWheels"
          }
        },
        "Product": {
          "id": 2,
          "name": "FourWheels"
        }
      }
    ]
  }
  </code></pre>
  
  <p>And here's my Ionic 2/Angular html:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div *ngFor="let p of User.pricingList | groupBy:p.ProductId"&gt;
      &lt;div class="ProductTitle"&gt;{{p.Product.name}}&lt;/div&gt;
      &lt;div&gt;
          &lt;div class="myClass"&gt;Name&lt;/div&gt;
          &lt;div class="myClass"&gt;Price&lt;/div&gt;
      &lt;/div&gt;
      &lt;div style="myClass2"&gt;
          &lt;div class="myClass"&gt;{{p.subProduct.name}}&lt;/div&gt;
          &lt;div class="myClass"&gt;{{p.price}}&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://github.com/danrevah/ngx-pipes/blob/master/src/app/pipes/array/group-by.ts" rel="nofollow noreferrer">GroupByPipe implementation</a></p>