Using rxjs, how to map each element to multiple elements

Question

I suspect this isn't hard, but I can't figure out how to do it. I have an array of objects, and each object contains an array. After doing some additional processing, I want to retrieve a remote resource for each of the elements. My problem is that my function returns an array, but I want the elements of the array separate.

return Rx.Observable.from([                                // 1
    { "rosters": ["a/name1", "b/name2"] },
    { "rosters": ["c/name3", "c/name4"] }])
  .map(group => group.rosters)                             // 2
  .map(roster => roster.substring(0, roster.indexOf('/'))) // 3
  .distinct() // have I seen this before?
  .map(folder => http.get(URL + folder + '/ads.json').map(res => res.json())
  .map(adData => adData.ads)
  .reduce(/* choose random ad */);

I want the function at #2 to return data such that each enter of #3 is a separate string. Right now coming into #3 are arrays (in my example pairs of strings). Thanks!

Answer 1

With assistance both from the OP as well as from @tmslnz...

Change .map(group => group.roster) to .flatMap(group => group.roster).