title: RxJs - FlatMap Object with Observable Property
body: <p>I'm struggling with a simple RxJs query that I can't seem to wrap my head around. I can't seem to figure out how to merge Observables if they are wrapped inside an object. This example works as expected if I just directly return the Observable from flatMap, but I also need the name in my output. How can I achieve this?</p>
  
  <p>I'm using RxJS 5.0.0-beta.2</p>
  
  <p>Basic Data Structure:</p>
  
  <pre><code>var data = [
    {
      "name": "Test #1",
      "users": [
        {
          "name": "John Doe",
          "gender": "male"
        },
        {
          "name": "John Doe",
          "gender": "male"
        },
        {
          "name": "Jane Doe",
          "gender": "female"
        }
      ]
    },
    {
      "name": "Test #2",
      "users": [
        {
          "name": "John Doe",
          "gender": "male"
        },
        {
          "name": "Jane Doe",
          "gender": "female"
        },
        {
          "name": "Jane Doe",
          "gender": "female"
        }
      ] 
    }
  ];
  </code></pre>
  
  <p>RxJs Function:</p>
  
  <pre><code>Observable.fromArray(data)
    .flatMap(x =&gt; {
      return Observable.of({
        "name": x.name, 
        "count": Observable.fromArray(x.users)
                  .filter(x =&gt; x.gender == "male")
                  .count()
        })
    })
    .toArray()
    .subscribe(result =&gt; {
      console.log(result);
    });
  </code></pre>
  
  <p>Desired Result:</p>
  
  <pre><code>result = [
      {
        "name": "Test #1",
        "count": 2
      },
      {
        "name": "Test #2",
        "count": 1
      }
    ];
  </code></pre>
  
  <p>Actual Result:</p>
  
  <pre><code>result = [
      {
        "name": "Test #1",
        "count": Observable
      },
      {
        "name": "Test #2",
        "count": Observable
      }
    ];
  </code></pre>