title: Need to filter based on a condition in map function
body: <p>I am populating highchart in my angular 4 application by passing chartseries. I need to filter the chartseries based on a condition. I am not sure how to add a filter based on a condition in map function. The results object ultimately will contain chartseries object which in turn contains data object. The data object has a element name that equals Commercial option. I think the filter that I have written itself isnt correct as i cant see it filtering. </p>
  
  <p>The structure of this.results object while debugging</p>
  
  <p><a href="https://i.stack.imgur.com/Fulz3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Fulz3.png" alt="enter image description here"></a></p>
  
  <p>The filter that I want to use is </p>
  
  <pre><code>.filter(x=&gt; x.chartSeries.data.find(x=&gt; x.name === "Commercial Option")); 
  </code></pre>
  
  <p>and the condition would be based on </p>
  
  <pre><code> if(!this.CommercialPremium)
  </code></pre>
  
  <p>How do I used this condition and filter in my map function in code shared below section TS Code</p>
  
  <p>The second option that i thought of is creating a property</p>
  
  <pre><code>get getChartSeries() : Array&lt;NpvAnalysisResult&gt; {
      if(!this.CommercialPremium) {
      return  this.results.filter(x=&gt; x.chartSeries.data.find(x=&gt; x.name == 'Commercial Option'));    
      }
    } 
  </code></pre>
  
  <p>Html code</p>
  
  <pre><code>&lt;div class="tb-row d-flex flex-row"&gt;
      &lt;div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"&gt;&lt;/div&gt;
      &lt;div *ngFor="let result of results;" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"&gt;
          &lt;app-box-plot-chart [series]="result.chartSeries" [moduleName]="moduleName"&gt;
          &lt;/app-box-plot-chart&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>TS code</p>
  
  <pre><code>processResults() {
      if (!this._npvResults) {
        return;
      }
      this.results = this._npvResults.map((result: NpvAnalysis) =&gt; {
          return createNpvAnalysisResult(result);
      })
  
    }
  </code></pre>
  
  <p>Complete Component code</p>
  
  <pre><code>import { Component, Input, OnInit } from '@angular/core';
  import { NpvAnalysis, NpvAnalysisResult, createNpvAnalysisResult } from '../../../../shared/models/results';
  import { ReactiveComponent } from '@wtw/toolkit/src/utils/base.component';
  
  @Component({
    selector: 'app-net-present-value-analysis',
    templateUrl: './net-present-value-analysis.component.html',
  })
  export class NetPresentValueAnalysisComponent extends ReactiveComponent implements OnInit {
    isExpanded = false;
    showTable = true;
    showProjection = false;
    public selectedAnalysis: NpvAnalysis = null;
    public results: Array&lt;NpvAnalysisResult&gt; = [];
    private chartSeries1 : Array&lt;NpvAnalysisResult&gt; = [];
    public moduleName: string = '';
    @Input() CommercialPremium : boolean;
  
    @Input() set npvResults(value: Array&lt;NpvAnalysis&gt;) {
      this._npvResults = value;
      this.processResults();
    }
  
    private _npvResults: Array&lt;NpvAnalysis&gt; = [];
  
    constructor() {
      super();
    }
  
    ngOnInit() {
      this.moduleName = 'npv';
    }
  
    processResults() {
      if (!this._npvResults) {
        return;
      }
      this.results = this._npvResults.map((result: NpvAnalysis) =&gt; {
          return createNpvAnalysisResult(result);
      })
  
    }
  
    //.filter(x=&gt; x.chartSeries.data.find(x=&gt; x.name === "Commercial Option"));
  
    get getChartSeries() : Array&lt;NpvAnalysisResult&gt; {
      if(!this.CommercialPremium) {
      return  this.results.filter(x=&gt; x.chartSeries.data.find(x=&gt; x.name == 'Commercial Option'));    
      }
    } 
  
    showProjectionClick(i) {
      const results = this._npvResults[i];
      if (results) {
        this.selectedAnalysis = results;
        this.showProjection = true;
      }
    }
  
    hideProjection() {
      this.selectedAnalysis = null;
      this.showProjection = false;
    }
  }
  </code></pre>
  
  <p>Complete html code</p>
  
  <pre><code>&lt;div class="card"&gt;
      &lt;!-- Net Present Value Analysis --&gt;
      &lt;div class="card-header" role="tab" id="nva_heading"&gt;
          &lt;a [ngClass]="{'collapsed': !isExpanded}" data-toggle="collapse" href="javascript:void(0);" (click)="isExpanded = !isExpanded"
              role="button" [attr.aria-expanded]="isExpanded" aria-controls="nva"&gt;
              &lt;h5 class="mb-0"&gt;
                  &lt;span style="margin-left: -15px" class="col-sm-2" tooltip="{{'CAPTIVES.RESULTS.NVA.TITLE.TOOLTIP'|translate}}"&gt;
                          {{'CAPTIVES.RESULTS.NVA.TITLE.LABEL'|translate}}
                  &lt;/span&gt;
              &lt;/h5&gt;
          &lt;/a&gt;
      &lt;/div&gt;
      &lt;div [ngClass]="{'show': isExpanded}" id="nva" class="collapse" role="tabpanel" aria-labelledby="nva_heading" data-parent="#nva"
          [attr.aria-expanded]="isExpanded"&gt;
          &lt;div class="card-body"&gt;
              &lt;ul *ngIf="!showProjection" class="nav nav-pills mb-3" id="pills-tab" role="tablist"&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a href="javascript:void(0);" [ngClass]="!showTable ? '' : 'active' " class="nav-link " id="table-tab" data-toggle="pill"
                          role="tab" aria-controls="table" (click)="showTable = !showTable" aria-selected="true"&gt;{{'CAPTIVES.RESULTS.COMMON.TABLE'|translate}}&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a href="javascript:void(0);" [ngClass]="showTable ? '' : 'active'  " class="nav-link" id="chart-tab" data-toggle="pill"
                          role="tab" aria-controls="chart" (click)="showTable = !showTable" aria-selected="false"&gt;{{'CAPTIVES.RESULTS.COMMON.CHART'|translate}}&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
              &lt;div *ngIf="!showProjection" class="tab-content" id="pills-tabContent"&gt;
                  &lt;!-- nva table --&gt;
                  &lt;div *ngIf="showTable" class="tab-pane fade show active" id="base-strategy-table--nva" role="tabpanel" aria-labelledby="table-tab"&gt;
                      &lt;div class="tb-container"&gt;
  
                          &lt;div class="tb-row d-flex flex-row"&gt;
                              &lt;div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"&gt;&lt;/div&gt;
                              &lt;div *ngFor="let result of results; let i = index;" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6 view-projection-link"&gt;
                                  &lt;a href="javascript:void(0);" (click)="showProjectionClick(i)"&gt;{{'CAPTIVES.RESULTS.COMMON.VIEW_PROJECTION'|translate}}&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="tb-row d-flex flex-row"&gt;
                              &lt;div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"&gt;&lt;/div&gt;
                              &lt;div *ngFor="let result of results;" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"&gt;
                                  &lt;h6&gt;{{'CAPTIVES.RESULTS.NVA.CAPTIVE_OPTION'|translate}}&lt;/h6&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div class="tb-row d-flex flex-row"&gt;
                              &lt;div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"&gt;{{'CAPTIVES.RESULTS.NVA.PREMIUM_PAID'|translate}}&lt;/div&gt;
                              &lt;div *ngFor="let result of results" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"&gt; {{result?.captiveInsPremiumPaidTotal|number:'.0-0' }} &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="tb-row d-flex flex-row"&gt;
                              &lt;div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"&gt;{{'CAPTIVES.RESULTS.NVA.TAX_DEDUCTION'|translate}}&lt;/div&gt;
                              &lt;div *ngFor="let result of results" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"&gt; {{result?.captiveInsTaxDeductionTotal|number:'.0-0'}}&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="tb-row d-flex flex-row"&gt;
                              &lt;div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"&gt;{{'CAPTIVES.RESULTS.NVA.LOAN_TO_PARENT'|translate}}&lt;/div&gt;
                              &lt;div *ngFor="let result of results" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"&gt;{{result?.captiveInsLoanToParentTotal|number:'.0-0'}}&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="tb-row d-flex flex-row"&gt;
                              &lt;div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"&gt;{{'CAPTIVES.RESULTS.NVA.CAPITAL_CONTRIBUTION'|translate}}&lt;/div&gt;
                              &lt;div *ngFor="let result of results" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"&gt; {{result?.captiveInsCapitalContributionTotal|number:'.0-0'}} &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="tb-row d-flex flex-row"&gt;
                              &lt;div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"&gt;{{'CAPTIVES.RESULTS.NVA.DIVIDENT_DISTRIBUTION'|translate}}&lt;/div&gt;
                              &lt;div *ngFor="let result of results" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"&gt;{{result?.captiveDividentDistributionTotal|number:'.0-0'}}&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="tb-row d-flex flex-row"&gt;
                              &lt;div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"&gt;{{'CAPTIVES.RESULTS.NVA.TERMINAL_VALUE'|translate}}&lt;/div&gt;
                              &lt;div *ngFor="let result of results" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"&gt; {{result?.captiveInsTerminalValueTotal|number:'.0-0'}}&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="tb-row d-flex flex-row"&gt;
                              &lt;div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6 net-cost"&gt;{{'CAPTIVES.RESULTS.NVA.CAPTIVE_NET_COST'|translate}}&lt;/div&gt;
                              &lt;div *ngFor="let result of results" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6 net-cost"&gt; {{result?.captiveNetCost|number:'.0-0'}}&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;!--Commercial Option--&gt;
                          &lt;div *ngIf=CommercialPremium&gt;
                          &lt;div class="tb-row d-flex flex-row"&gt;
                              &lt;div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"&gt;&lt;/div&gt;
                              &lt;div *ngFor="let result of results;" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"&gt;
                                  &lt;h6&gt;{{'CAPTIVES.RESULTS.NVA.COMMERCIAL_OPTION'|translate}}&lt;/h6&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="tb-row d-flex flex-row"&gt;
                              &lt;div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"&gt;{{'CAPTIVES.RESULTS.NVA.PREMIUM_PAID'|translate}}&lt;/div&gt;
                              &lt;div *ngFor="let result of results" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"&gt; {{result?.commInsPremiumPaidTotal|number:'.0-0'}} &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="tb-row d-flex flex-row"&gt;
                              &lt;div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"&gt;{{'CAPTIVES.RESULTS.NVA.TAX_DEDUCTION'|translate}}&lt;/div&gt;
                              &lt;div *ngFor="let result of results" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"&gt; {{result?.commInsTaxDeductionTotal|number:'.0-0'}} &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="tb-row d-flex flex-row"&gt;
                              &lt;div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6 net-cost"&gt;{{'CAPTIVES.RESULTS.NVA.COMMERCIAL_NET_COST'|translate}}&lt;/div&gt;
                              &lt;div *ngFor="let result of results" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6 net-cost"&gt;{{result?.commNetCost|number:'.0-0'}} &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;!--Self Insurance Option--&gt;
                          &lt;div class="tb-row d-flex flex-row"&gt;
                              &lt;div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"&gt;&lt;/div&gt;
                              &lt;div *ngFor="let result of results;" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"&gt;
                                  &lt;h6&gt;{{'CAPTIVES.RESULTS.NVA.SELF_INSURANCE_OPTION'|translate}}&lt;/h6&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="tb-row d-flex flex-row"&gt;
                              &lt;div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"&gt;{{'CAPTIVES.RESULTS.NVA.DISCOUNTED_LOSSES_PAID'|translate}}&lt;/div&gt;
                              &lt;div *ngFor="let result of results" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"&gt;{{result?.selfInsDiscountedLossesPaidTotal|number:'.0-0'}}&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="tb-row d-flex flex-row"&gt;
                              &lt;div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"&gt;{{'CAPTIVES.RESULTS.NVA.DISCOUNTED_TAX_DEDUCTION'|translate}}&lt;/div&gt;
                              &lt;div *ngFor="let result of results" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"&gt; {{result?.selfInsDiscountedTaxDeductionTotal|number:'.0-0'}}&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="tb-row d-flex flex-row "&gt;
                              &lt;div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6 net-cost"&gt;{{'CAPTIVES.RESULTS.NVA.SELF_INSURANCE_NET_COST'|translate}}&lt;/div&gt;
                              &lt;div *ngFor="let result of results" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6 net-cost"&gt;{{result?.selfNetCost|number:'.0-0'}}&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;!-- nva table --&gt;
                  &lt;!-- nva Chart --&gt;
                  &lt;div *ngIf="!showTable" class="tab-pane base-strategy-chart fade show active" id="base-strategy-chart--nva" role="tabpanel"
                      aria-labelledby="chart-tab"&gt;
                      &lt;div class="tb-container"&gt;
                          &lt;div class="tb-row d-flex flex-row"&gt;
                              &lt;div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"&gt;&lt;/div&gt;
                              &lt;div *ngFor="let result of results; let i = index;" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6 view-projection-link"&gt;
                                  &lt;a href="javascript:void(0);" (click)="showProjectionClick(i)"&gt;{{'CAPTIVES.RESULTS.COMMON.VIEW_PROJECTION'|translate}}&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="tb-row d-flex flex-row"&gt;
                              &lt;div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"&gt;&lt;/div&gt;
                              &lt;div *ngFor="let result of results;" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"&gt;
                                  &lt;app-box-plot-chart [series]="result.chartSeries" [moduleName]="moduleName"&gt;
                                  &lt;/app-box-plot-chart&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;!-- Legend--&gt;
                      &lt;div class="col-12 legend"&gt;
                          &lt;div&gt;
                              &lt;span class="captive"&gt;&lt;/span&gt;&lt;span&gt;{{'CAPTIVES.RESULTS.NVA.CAPTIVE_OPTION'|translate}}&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div *ngIf=CommercialPremium&gt;
                              &lt;span class="commercial"&gt;&lt;/span&gt;&lt;span&gt;{{'CAPTIVES.RESULTS.NVA.COMMERCIAL_OPTION'|translate}}&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div&gt;
                              &lt;span class="self-insurance"&gt;&lt;/span&gt;&lt;span&gt;{{'CAPTIVES.RESULTS.NVA.SELF_INSURANCE_OPTION'|translate}}&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;!-- Legend End--&gt;
  
                  &lt;/div&gt;
  
  
                  &lt;!-- nva Chart End --&gt;
              &lt;/div&gt;
  
              &lt;app-net-present-value-analysis-projection [results]="selectedAnalysis" [CommercialPremium]="commercialPremium" [show]="showProjection" (hideProjection)="hideProjection()"&gt;&lt;/app-net-present-value-analysis-projection&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- Card + Net Present Value Analysis End--&gt;
  </code></pre>
  
  <p>NpvAnalysisResult</p>
  
  <pre><code>export interface NpvAnalysisResult extends NpvAnalysis {
      captiveNetCost: number;
      commNetCost: number;
      selfNetCost: number;
      captiveInsPremiumPaidTotal: number;
      captiveInsTaxDeductionTotal: number;
      captiveInsLoanToParentTotal: number;
      captiveInsCapitalContributionTotal: number;
      captiveDividentDistributionTotal: number;
      captiveInsTerminalValueTotal: number;
      commInsPremiumPaidTotal: number;
      commInsTaxDeductionTotal: number;
      selfInsDiscountedLossesPaidTotal: number;
      selfInsDiscountedTaxDeductionTotal: number;
      boxplotChartSeries: any[];
  }
  </code></pre>
  
  <p>NpvResults</p>
  
  <pre><code>NpvAnalysis extends NpvResults
  
  export interface NpvAnalysis extends NpvResults {
      strategyName: string;
  }
  </code></pre>
  
  <p>export interface NpvResults  {</p>
  
  <pre><code>    commInsYear: number[];
      commInsPremiumPaid: number[];
      commInsTaxDeduction: number[];
      commInsDiscountedTaxDeduction: number[];
      commInsDiscountedLossesPaid: number[];
      commInsGraphData: number[];
      selfInsYear: number[];
      selfInsDiscountedLossesPaid: number[];
      selfInsDiscountedTaxDeduction: number[];
      selfInsGraphData: number[];
      captiveInsYear: number[];
      captiveInsPremiumPaid: number[];
      captiveInsTaxDeduction: number[];
      captiveInsLoanToParent: number[];
      captiveInsCapitalContribution: number[];
      captiveDividentDistribution: number[];
      captiveInsTerminalValue: number[];
      captiveInsGraphData: number[];
      chartSeries: SeriesGeneric&lt;BoxPlotSeriesData&gt;;
  }
  </code></pre>
  
  <p>BoxPlotSeriesData interface</p>
  
  <pre><code>export interface BoxPlotSeriesData  {
  
      low: number;
      q1: number;
      median: number;
      q3: number;
      high: number;
      color: string;
      name: string;
  }
  
  class SeriesGeneric&lt;T&gt; { 
  
      public data: T[];
  }
  </code></pre>