title: Filter array of objects by property value
body: <p>I'm new with Angular and observables.
  I'm getting from a JSON file a list of products.</p>
  
  <p><strong>products.service</strong></p>
  
  <pre><code>getProducts(): Observable&lt;Product[]&gt;{
      return this._http.get&lt;Product[]&gt;(this.configUrl); 
  }
  </code></pre>
  
  <p><strong>products.component</strong></p>
  
  <pre><code>products: Product[];
  
  getProducts(): void{
      this.productsService.getProducts()
          .subscribe(products =&gt; this.products = products);
  }
  </code></pre>
  
  <p><strong>product.ts</strong></p>
  
  <pre><code>export interface Product {
      "quantity": number;
      "price": string;
      "available": boolean;
      "sublevel_id": number;
      "name": string;
      "id": string;
  }
  </code></pre>
  
  <p>Everything is working fine but I would like to filter the response to get only the products where <code>available == true</code></p>
  
  <p>I tried in service and component some approaches but nothing worked. How can I achieve this in a proper way?</p>
  
  <p><strong>Code not working</strong></p>
  
  <pre><code>this.products = this.products.filter(product =&gt; {
    return product.available == true
  });
  
  
  
  filterProducts(): Observable&lt;Product[]&gt;{
  
      return this.getProducts()
          .pipe(map(products =&gt; products
          .filter(product =&gt; product.available === true)));
  
  }
  </code></pre>
  
  <p><strong>JSON response (not filtered)</strong></p>
  
  <pre><code> { "products": [
    {
      "quantity": 308,
      "price": "$8,958",
      "available": false,
      "sublevel_id": 3,
      "name": "aute",
      "id": "58b5a5b1b6b6c7aacc25b3fb"
    },
    {
      "quantity": 891,
      "price": "$5,450",
      "available": true,
      "sublevel_id": 3,
      "name": "mollit",
      "id": "58b5a5b117bf36cf8aed54ab"
    },
    {
      "quantity": 698,
      "price": "$17,001",
      "available": false,
      "sublevel_id": 10,
      "name": "eiusmod",
      "id": "58b5a5b18607b1071fb5ab5b"
    }
    ]}
  </code></pre>