I'm new with Angular and observables. I'm getting from a JSON file a list of products.

products.service

getProducts(): Observable<Product[]>{
    return this._http.get<Product[]>(this.configUrl); 
}

productsponent

products: Product[];

getProducts(): void{
    this.productsService.getProducts()
        .subscribe(products => this.products = products);
}

product.ts

export interface Product {
    "quantity": number;
    "price": string;
    "available": boolean;
    "sublevel_id": number;
    "name": string;
    "id": string;
}

Everything is working fine but I would like to filter the response to get only the products where available == true

I tried in service and ponent some approaches but nothing worked. How can I achieve this in a proper way?

Code not working

this.products = this.products.filter(product => {
  return product.available == true
});



filterProducts(): Observable<Product[]>{

    return this.getProducts()
        .pipe(map(products => products
        .filter(product => product.available === true)));

}

JSON response (not filtered)

 { "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"
  }
  ]}

I'm new with Angular and observables. I'm getting from a JSON file a list of products.

products.service

getProducts(): Observable<Product[]>{
    return this._http.get<Product[]>(this.configUrl); 
}

products.ponent

products: Product[];

getProducts(): void{
    this.productsService.getProducts()
        .subscribe(products => this.products = products);
}

product.ts

export interface Product {
    "quantity": number;
    "price": string;
    "available": boolean;
    "sublevel_id": number;
    "name": string;
    "id": string;
}

Everything is working fine but I would like to filter the response to get only the products where available == true

I tried in service and ponent some approaches but nothing worked. How can I achieve this in a proper way?

Code not working

this.products = this.products.filter(product => {
  return product.available == true
});



filterProducts(): Observable<Product[]>{

    return this.getProducts()
        .pipe(map(products => products
        .filter(product => product.available === true)));

}

JSON response (not filtered)

 { "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"
  }
  ]}

• javascript
• angular
• typescript
• rxjs

3 Answers 3

Try this.

let o = { "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"
  }
  ]}

let filtered = o.products.filter(p => p.available===true)
console.log(filtered);

This should work.

getProducts(): void{
    this.productsService.getProducts()
        .subscribe(products => this.products = products.filter(product=>product.available==true));
}

use the filter operator inside the pipe and do the normal subscription

filterProducts(): Observable<Product[]>{

return this.getProducts()
    .pipe(
       filter(products =>  product.available )
     )

}