title: Mapping http response to interface in angular 7
body: <p>I have angular shopping template and I am trying to connect the cart service that was used to my backend, so I have done so but to make thing easier in the database I had to change the request to my backend from <code>{quantity, amount, product}</code> to <code>{quantity, amount, productId}</code> so I don't have to store the whole product in the database and its working fine so far, now when I got the response I want to map it to its interface but first I need to find the product with the id that I have in the response, I am able to map the response if I have the whole product but again I don't want to have the product saved in my database. here is my code for the mapping but I have an issue calling my function that find the product by id:</p>
  
  <pre><code>this.getAllProducts().pipe(map(p =&gt; p.map((s): CartItem =&gt; ({
    currency: s.currency,
    product: this.productService.getProduct(s.product).subscribe(p =&gt; p),
    quantity: s.quantity,
    selectedColor: s.selectedColor,
    selectedSize: s.selectedSize,
    userId: s.userId
  }))));
  
  
    private getAllProducts(): Observable&lt;CartResponse[]&gt; {
      return this.http.get&lt;CartResponse[]&gt;('http://localhost:8082/cart/getAllItems?userId=111').pipe(
        map(o =&gt; o.map((sp): CartResponse =&gt; ({
          quantity: sp.quantity,
          currency: sp.currency,
          product: sp.product,
          selectedColor: sp.selectedColor,
          selectedSize: sp.selectedSize,
          userId: sp.userId
        }))));
    }
  
  
  export interface CartResponse {
      product: string;
      quantity: number;
      selectedSize: any;
      selectedColor: string;
      currency: string;
      userId: string;
  }
  
  export interface CartItem {
      product: Product;
      quantity: number;
      selectedSize: any;
      selectedColor: string;
      currency: string;
      userId: string;
  }
  </code></pre>