title: RxJs: How to combine two observable into a new observable with different type
body: <p>I'm very new to <code>RxJs</code> and <code>NgRx store</code> , I'm want to create an <code>@Effect</code> with combination of two observables (very difficult to explain):</p>
  
  <p>My interfaces looks like:</p>
  
  <pre><code>export interface ProductDetails {
    product: Product;
    productBody: ProductBody;
  }
  
  export interface ProductBody{
    id: string;
    body: string;
  }
  </code></pre>
  
  <p>I'm trying to create a new object<code>productDetails</code> and set it's properties.
  properties are <code>product</code> which <code>payload</code> has <code>product</code> and <code>productBody</code> which gets it from <code>productService(id)</code> (It returns <code>observable&lt;productBody&gt;</code>)  </p>
  
  <p>This effect should return <code>observable&lt;productDetails&gt;</code>  </p>
  
  <pre><code>   @Effect()
    getProductDetails$ = this.actions$
      .ofType(ProductActions.GET_STEP)
      .map(action =&gt; action.payload)
      .flatMap(s =&gt; {
        let body;
        this.productService.getStepBody(s.id).subscribe(x =&gt; body = x);
        return Observable.of({
          step: s,
          productBody: body
        });
      })
      .map(res =&gt; this.productActions.getProductDetailsSuccess(res));
  </code></pre>
  
  <p>this returns:<code>Object {productBody: undefined, product: Object}</code></p>
  
  <p>I understand why is returning <code>undefined</code> for <code>productBody</code> but not sure how to fix it. I tried using <code>zip</code>, <code>switchMap</code> and etc but no chance! </p>