title: Angular: Filtering object in code with select list selections
body: <p>I have a collection of objects in JSON that look like this and is assigned to the <strong>$rootScope.filteredData object</strong>:</p>
  
  <pre><code>{
    "Id": 1,
    "Compound": "Compound Name",
    "Compound_2": "",
    "Number": "XXXX-016",
    "Phase": "2",
    "TherapeuticArea": "Therapy Area",
    "Locations": [{
      "Region": "USA",
      "Sites": [{
        "Id": 306,
        "TrialId": 3,
        "SiteName": "Arizona PC - HAL",
        "Address1": "",
        "Address2": "4555 W Lowland Ave # 400",
        "City": "Phoenix",
        "State": "AZ",
        "ZipCode": "99999",
        "Province": "USA",
        "Latitude": "66.5062203",
        "Longitude": "-52.033464",
        "Region": "USA"
      }, {
        "Id": 307,
        "TrialId": 3,
        "SiteName": "Arizona Associates, PC - HOPE",
        "Address1": "",
        "Address2": "811 S. Wilmot Rd. Suite 209",
        "City": "Tucson",
        "State": "AZ",
        "ZipCode": "99999",
        "Province": "USA",
        "Latitude": "14.2140875",
        "Longitude": "-120.8579021",
        "Region": "USA"
      }, {
        "Id": 308,
        "TrialId": 3,
        "SiteName": "Benaroya Research Institute/Virginia Mason Medical Center",
        "Address1": "",
        "Address2": "1100 Tenth Avenue",
        "City": "Seattle",
        "State": "WA",
        "ZipCode": "99999",
        "Province": "USA",
        "Latitude": "41.6094749",
        "Longitude": "-163.3279078",
        "Region": "USA"
      }]
    }]
  }
  </code></pre>
  
  <p>I have 3 select lists that show all of the values in the "Compound", "Phase" and "TherapeuticArea" fields, and 3 select lists that show the Region, State and City. Selecting an item from each select list allows you filter the view of this information based on those six values. </p>
  
  <p>I'm filtering these items currently in markup with Angular's built in filters, but need to rewrite this in code. Using .forEach, I'm able to get the filtering working for each item individually, but not cooperatively like it does with the Angular filter's. For example, if I filter on just "Compound" or "Phase", I get those results as I should. But if I filter on "Compound" AND "Phase" or any combination of the three filters, I'm no getting the results that I expect.</p>
  
  <p>I have an inner .forEach that does another loop thru the selections to get the locations lat/lng (which is fed to another method that plots them on a map). That part seems to be working like it should. But the outer part does not. </p>
  
  <p>Here's the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$scope.mapSelections = function(region, state, city, therapy, phase, compound) {
      $rootScope.filteredPins = [];
  
      if (!$scope.selectRegion) {
          var region = '';
      } else {
          var region = $scope.selectRegion.Region;
      }
  
      if (!$scope.selectState) {
          var state = '';
      } else {
          var state = $scope.selectState.StateName;
      }
  
      if (!$scope.selectCity) {
          var city = '';
      } else {
          var city = $scope.selectCity.CityName;
      }
  
      if (!$scope.selectTherapy) {
          var therapy = '';
      } else {
          var therapy = $scope.selectTherapy;
      }
  
      if (!$scope.selectPhase) {
          var phase = '';
      } else {
          var phase = $scope.selectPhase;
      }
  
      if (!$scope.selectCompound) {
          var compound = '';
      } else {
          var compound = $scope.selectCompound;
      }
  
      $rootScope.filteredData.forEach(function(itemElement, itemIndex) {
  
          if ((itemElement.TherapeuticArea === therapy &amp;&amp; therapy != '') || (itemElement.Compound === compound &amp;&amp; compound != '') || (itemElement.Phase === phase &amp;&amp; phase != '')) {
              console.log('you have a hit on : ' + therapy + ' / Phase: ' + phase + ' / Compound: ' + compound);
  
              itemElement.Locations.forEach(function(locationElement, locationIndex) {
                  if (locationElement.Region === region || !region) {
  
                      locationElement.Sites.forEach(function(siteElement, siteIndex) {
                          if ((siteElement.State == state &amp;&amp; !city) || (siteElement.City == city &amp;&amp; siteElement.State == state) || (!state &amp;&amp; !city)) {
  
                              if (siteElement.Longitude != '' &amp;&amp; siteElement.Latitude != '') {
                                  $rootScope.filteredPins.push(siteElement);
                                  $rootScope.filteredDataMapItems.push(itemElement);
                                  // console.table(filteredPins)
                                  return false;
                              }
  
                          }
                      });
                  }
              });
          }
      });
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;column&gt;
    &lt;select name="selectRegion" class="form-control" ng-model="selectRegion" ng-change="regionSelected(); mapSelections(selectRegion.Region, null, null, selectTherapy, selectPhase, selectCompound)" ng-options="location as location.Region for location in locationObject | orderBy: location.Region:reverse track by location.Region"&gt;
      &lt;option value=""&gt;Select Region&lt;/option&gt;
    &lt;/select&gt;
  
    &lt;select name="selectState" class="form-control" ng-disabled="!selectRegion" ng-model="selectState" ng-change="mapSelections(selectRegion.Region, selectState.StateName, null, selectTherapy, selectPhase, selectCompound)" ng-options="state as state.StateName for state in selectRegion.States | unique: 'state.StateName' | orderBy: 'StateName' "&gt;
      &lt;option value=""&gt;{{regionSelectMsg}}&lt;/option&gt;
    &lt;/select&gt;
  
    &lt;select name="selectCity" class="form-control" ng-disabled="!selectState" ng-model="selectCity" ng-change="mapSelections(selectRegion.Region, selectState.StateName, selectCity.CityName, selectTherapy, selectPhase, selectCompound)" ng-options="city as city.CityName for city in selectState.Cities | unique: 'city.CityName' | orderBy: 'CitytName' "&gt;
      &lt;option value=""&gt;Select City&lt;/option&gt;
    &lt;/select&gt;
  &lt;/column&gt;
  &lt;column&gt;
    &lt;select name="selectTherapy" class="form-control" ng-model="selectTherapy" ng-options="data.TherapeuticArea as data.TherapeuticArea for data in dataObject | unique: 'TherapeuticArea' | orderBy: 'TherapeuticArea' " ng-change="mapSelections(null, null, null, selectTherapy, selectPhase, selectCompound)"&gt;
      &lt;option value=""&gt;Select Therapeutic Area&lt;/option&gt;
    &lt;/select&gt;
    &lt;select name="selectPhase" class="form-control" ng-model="selectPhase" ng-options="data.Phase as ('Phase ' + data.Phase) for data in dataObject | unique: 'Phase' | orderBy: 'Phase' : reverse " ng-change="mapSelections(null, null, null, selectTherapy, selectPhase, selectCompound)"&gt;
      &lt;option value=""&gt;Select Phase&lt;/option&gt;
    &lt;/select&gt;
    &lt;select name="selectCompound" class="form-control" ng-model="selectCompound" ng-options="data.Compound as data.Compound + '&amp;nbsp;' + data.Compound_2 for data in dataObject | unique: 'Compound' | orderBy: 'Compound' " ng-change="mapSelections(null, null, null, selectTherapy, selectPhase, selectCompound)"&gt;
      &lt;option value=""&gt;Select Compound&lt;/option&gt;
    &lt;/select&gt;
  &lt;/column&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm also using underscoreJS in this project, and if there's an underscore method that is best for filtering these types of conditions, I'm open to using that.</p>