title: Flatten nested data-structure in a non-complete RxJS stream
body: <p>I want to flatten the values I get from the store and emit them as a single array when store emits.</p>
  
  <p>It is quite easy in a synchronous version from my <em>No-RxJS</em> example below, but I can't figure out how to do it with RxJS.</p>
  
  <p>I assume I could use RxJS to buffer values from a single <code>.next</code> call.</p>
  
  <p>Should I use RxJS operators for that? If yes, then how do I make the nested data structure flat?</p>
  
  <p>Here's a minimal example of what I'm trying to achieve.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const store$ = new Rx.BehaviorSubject([])
  
  store$.next([
    {
      id: 1,
      items: [
        {
          id: 1,
          title: 'Foo'
        },
        {
          id: 2,
          title: 'Bar'
        }
      ]
    },
    {
      id: 2,
      items: [
        {
          id: 3,
          title: 'Fizz'
        },
        {
          id: 4,
          title: 'Buzz'
        }
      ]
    },
  ]);
  
  // Desired output: [ "Foo", "Bar", "Fizz", "Buzz" ]
  
  store$
    .filter(({length}) =&gt; length &gt; 0)
    .flatMap(group =&gt; group)
    .flatMap(({items}) =&gt; items)
    .map(({title}) =&gt; title)
    .subscribe(console.log) // Emits separate values :-(
  
  // No-RxJs approach
  
  store$
    .filter(({length}) =&gt; length &gt; 0)
    .map(groups =&gt; groups
          .map(
            ({ items }) =&gt; items.map(
              ({ title }) =&gt; title
            )
          )
          .reduce((next, acc) =&gt; [ ...acc, ...next ], []))
    .subscribe(console.log) // Works as expected.</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.1/Rx.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>