title: Angular 7 filter array
body: <p>I have the following Angular component:  </p>
  
  <pre><code>  private json: JsonResponseDTO;
  
    constructor(private dtoService: PoolDTOServiceService) {
    }
  
    ngOnInit() {
      this.dtoService.setJsonResponse();
      this.getPool();
    }
  
    getPool() {
      this.json = this.dtoService.jsonResponse;
    }
  </code></pre>
  
  <p>The <code>json</code> contains an element pools, that is an  array. This one should be filtered by name, which is typed in an input. (I don not show the HTML, since this is not relevant).<br>
  I want to be able to 'remove' my search criteria, so the initial approach is: </p>
  
  <pre><code>  private json: JsonResponseDTO;
  private filterJson: JsonResponseDTO;
  
    constructor(private dtoService: PoolDTOServiceService) {
    }
  
    ngOnInit() {
      this.dtoService.setJsonResponse();
      this.getPool();
    }
  
    getPool() {
      this.json = this.dtoService.jsonResponse;
      this.filterJson = this.json;
    }
  
    filter(filterCriteria: String) {
      this.filterJson = this.json;
      this.filterJson.pools.filter((element) =&gt; element.name === filterCriteria);
    }
  </code></pre>
  
  <p>and then bind the <code>filterJson</code> to the HTML DOM.<br>
  Is there a cleaner way to do this?
  I want to avoid requesting the new JSON each time the filtered name is 'removed', since the data is expensive in time to fetch.</p>