title: Filtering object by multiple values
body: <p>I'm in the process of creating an app using the Ionic 2 with Angular 2 and i've hit a bit of a snag.</p>
  
  <p>My app is fetching data from an API that returns a mongo object using the <a href="https://docs.mongodb.com/manual/reference/command/geoNear/" rel="nofollow noreferrer">geonear</a> command. This object contains a bunch of different store with info on opening hours and such:</p>
  
  <pre><code>{ 
  "_id" : ObjectId("585723490a60e14d8a41ffd3"), 
  "storeID" : NumberInt(1110), 
  "storeName" : "Kvickly Sundby", 
  "chain" : "kvickly", 
  "phone" : NumberInt(32860111), 
  "openingDates" : [
      {
          "open" : "08.00", 
          "close" : "20.00", 
          "date" : "2016-12-13", 
          "_id" : ObjectId("585723490a60e14d8a41ffef")
      }, 
      {
          "open" : "08.00", 
          "close" : "20.00", 
          "date" : "2016-12-14", 
          "_id" : ObjectId("585723490a60e14d8a41ffee")
      }
  ], 
  "location" : {
      "address" : "Englandsvej 28", 
      "city" : "København S", 
      "zip" : NumberInt(2300), 
      "coordinates" : [
          12.6048, 
          55.65654
      ]
  }, 
  "__v" : NumberInt(0)
  </code></pre>
  
  <p>}</p>
  
  <p>The data is passed on to my template, looped through and displayed on cards with an accordion function as well as a pagination function.</p>
  
  <p>Fetching form the API</p>
  
  <pre><code>getStores(lat, lng) {
      this.fetchUrl = this.envVar.getEnvUrl() + '?lat=' + lat + '&amp;lng=' + lng;
      console.log(this.fetchUrl);
      this.http.get(this.fetchUrl)
        .map(res =&gt; res.json())
        .subscribe(data =&gt; {
          this.stores = data;
          this.loading.dismiss();
          this.curPage = 1;
      });
    }
  </code></pre>
  
  <p>Template</p>
  
  <pre><code>&lt;accordion&gt;
          &lt;accordion-group *ngFor="let store of stores | paginate: { itemsPerPage: 15, currentPage: p }; let first = first" [isOpened]="first"&gt;
              &lt;accordion-heading&gt;
                  &lt;ion-card class="store-card" [style.border-color]="storeColor(store.obj.chain)"&gt;
                      &lt;ion-row&gt;
                          &lt;ion-col width-67&gt;
                              &lt;ion-col&gt;
                                  &lt;h2 class="store-name"&gt;{{store.obj.storeName}}&lt;/h2&gt;
                                  &lt;p class="store-location"&gt;{{store.obj.location.address}} &lt;br&gt; {{store.obj.location.city}}, {{store.obj.location.zip}}&lt;/p&gt;
                                  &lt;ion-icon  ios="ios-arrow-down" md="ios-arrow-down"&gt;&lt;/ion-icon&gt;
                              &lt;/ion-col&gt;
                          &lt;/ion-col&gt;
                          &lt;ion-col width-33&gt;
                              &lt;ion-col width-100 *ngFor="let date of store.obj.openingDates | where : {date : today}" class="opening-hours"&gt;&lt;p&gt;{{date.open}} - {{date.close}}&lt;/p&gt;&lt;/ion-col&gt;
                              &lt;ion-col width-100 class="distance"&gt;
                                  &lt;p&gt;{{store.dis | formatDistance}} &lt;ion-icon name="pin"&gt;&lt;/ion-icon&gt;&lt;/p&gt;
                                  &lt;p&gt;&lt;a target="_blank" href="http://www.google.com/maps/place/{{store.obj.chain}} {{store.obj.location.address}}, {{store.obj.location.zip}} {{store.obj.location.city}}"&gt;Rutevejledning&lt;/a&gt;&lt;/p&gt;
                              &lt;/ion-col&gt;
                          &lt;/ion-col&gt;
                      &lt;/ion-row&gt;
                  &lt;/ion-card&gt;
              &lt;/accordion-heading&gt;
              &lt;div class="extra-info"&gt;
                  &lt;ion-grid&gt;
                      &lt;ion-row&gt;
                          &lt;ion-col width-100&gt;
                              &lt;p class="week"&gt;Uge {{weekNumber}}&lt;/p&gt;
                          &lt;/ion-col&gt;
                      &lt;/ion-row&gt;
                      &lt;ion-row width-100 *ngFor="let date of store.obj.openingDates | afterWhere: {date: tomorrow} | slice:0:leftInWeek"&gt;
                          &lt;ion-col width-50 class="weekday"&gt;{{date.date | date: "EEEE, d MMMM"}}&lt;/ion-col&gt;
                          &lt;ion-col width-50 class="hours"&gt;{{date.open}} - {{date.close}}&lt;/ion-col&gt;
                      &lt;/ion-row&gt;
                  &lt;/ion-grid&gt;
              &lt;/div&gt;
          &lt;/accordion-group&gt;
      &lt;/accordion&gt;
  </code></pre>
  
  <p>This all works fine, but what i then wish do to being able to filter the results by the "chain" property in the object so that i only get some chains (Walmart, Costco, etc.)</p>
  
  <p>I just not sure how to handle this. In the Ionic provided navigation i have a collection of toggle switches for the different chain (they're hardcoded, don't worry) that i would like to use for the filtering:</p>
  
  <p>Navigation toggles</p>
  
  <pre><code>&lt;ion-content&gt;
  &lt;ion-item&gt;
    &lt;ion-label&gt;Chain 1&lt;/ion-label&gt;
    &lt;ion-toggle&gt;&lt;/ion-toggle&gt;
  &lt;/ion-item&gt;
  
  &lt;ion-item&gt;
    &lt;ion-label&gt;Chain 2&lt;/ion-label&gt;
    &lt;ion-toggle&gt;&lt;/ion-toggle&gt;
  &lt;/ion-item&gt;
  
  &lt;ion-item&gt;
    &lt;ion-label&gt;Chain 3&lt;/ion-label&gt;
    &lt;ion-toggle&gt;&lt;/ion-toggle&gt;
  &lt;/ion-item&gt;
  </code></pre>
  
  <p></p>
  
  <p>Initially i was hoping to use something like filterBy in Angular 2 version of <a href="https://github.com/a8m/angular-filter#filterby" rel="nofollow noreferrer">ng-pipes</a> but filterBy will only accept a single value to filter by and as such isn't really very useable in my scenario.</p>
  
  <p>So what's the best option here? Some sort of custom filter pipe? and do i sort in the final object or do i pass some parameters to the api and limit before the data is sent back?</p>
  
  <p>It's all a bit confusing, and this is my first Angular project so i'd really appreciate some guidance as to how i'll do this (in the best possible way)</p>