title: RXJS Call api in nested array and merge the result into the arrays
body: <p>I have an object with an array of families. Each one of these families holds an array of family member objects. Each of the family members has a contract which is not present right now. My task is to fetch the contract from a rest api and to merge it into the member object. </p>
  
  <pre><code>Object {
   content: [{
    familiId: '1',
    familyMemmbers: [
     { id: '1'
       name: 'Tom'
       ...
      },
      { id: '2'
       name: 'Peter'
       ...
      }
     ]
   },
  {
    familiId: '2',
    familyMemmbers: [
     { id: '1'
       name: 'Paul'
       ...
      },
      { id: '2'
       name: 'Joe'
       ...
      }
     ]
   }]
  }
  </code></pre>
  
  <pre><code>this.service.getFamilies().switchMap(familiyPage =&gt; from(familiyPage.content))
            .switchMap(family =&gt; from(family.familyMembers)).mergeMap(member =&gt; this.service.getContract(member.id).map(contract =&gt; {
            return {...member, contract}
  </code></pre>
  
  <p>My approach returns the object <code>{ id: 1, name: 'Tom', contract: ....}</code> on the first emit and <code>{ id: 2, name: 'Peter', contract: ....}</code> on the second emit, <code>{ id: 1, name: 'Paul', contract: ....}</code> on the third emit and <code>{ id: 2, name: 'Joe', contract: ....}</code> on the fourth emit.</p>
  
  <p>What i would like to have is that there is only one emit which contains the whole data structure. i.e.</p>
  
  <pre><code>Object {
   content: [{
    familiId: '1',
    familyMemmbers: [
     { id: '1',
       name: 'Tom',
       contract: {...},
       ...
      },
      { id: '2',
       name: 'Peter',
       contract: {...},
       ...
      }
     ]
   }, ...]
  }
  </code></pre>