angular and rxjs - removing properties from object

Question

I have an endpoint that returns the following object properties:

{
  "id": "1",
  "department": "sample",
  "address": "sample",
  "email": "[email protected]",
  "products": [
    {
      "id": "100",
      "product_type": "A",
      "product_category": "sample",
      "category": "sample"
    },
    {
      "id": "101",
      "product_type": "A",
      "product_category": "sample",
      "category": "sample"
    }
  ]
}

I'm doing like this on Angular

this.httpService.get<Product>(<my_endpoint>).pipe(map(response => response.data))

I need to remove all the properties product_type from the array of objects and keep the rest intact. I can't find if is possible to do this with only RxJs library filtering capabilities.

Answer 1

You can use RxJS pluck and map, as well as array map and object destructuring to remove the un-needed property.

this.httpService.get<Product>(<my_endpoint>).pipe(
   pluck('data'),
   map( data => {
     const products = data.products.map( p => {
       const {product_type, ...others} = p;
       return {
          ...others
       }
     });
     return {
       ...data,
       products
     }
   })
)

Note: don't use delete on objects if you can avoid it (it mutates the object)

Answer 2

Inside your map function do this:

map((response) =>{ 
let data = response.data;
let products = data.products;

products =products.map((product) =>{ 
delete product['property1'];
return product; // without deleted properties;
}) 
data.products =products ;
return data;
})