在angular2 rxjs中嵌套HTTP调用

Question

I'm new to angular 2 and would like to make nested http calls where one call is dependent on the next call. My code is as follows in service:

getUserPosts(): Observable<any[]>{
    return this.http.get(this.apiUserURL + this.userId + '/')
        .map((response: Response)  => response.json())  
        .flatMap((users) => {
            return Observable.forkJoin(
                users.map(user=>
                    this.http.get(this.apiUserPostURL + user.id)
                    .flatMap(response => response.json())   
                )   
            )
        })
}

in Components i have:

ngOnInit() {
this.results = this.postsService.getUserPosts()
  .subscribe(posts => {  this.posts = posts
    console.log(posts);
  })   

}

when i do that i get the last post of every user but not all posts. (i have 3 posts for every user, and i have two users in my database, but below i get only one post of every user:

(2) [Object, Object] 0:Object 1:Object

solution expected: get all posts from all users like this: (6) [Object, Object, Object, Object, Object, Object]

when i change the last part of my service to the following:

users.map(user=>
    this.http.get(this.apiUserPostURL + user.id)
    .map(response => response.json())   
)   

i get two arrays of 3 posts each and i don't know how to access those posts with *ngFor:

(2) [Array(3), Array(3)] 0:Array(3) 0:Object 1:Object 2:Object 1:Array(3) 0:Object 1:Object 2:Object

Solution expected: reach out directly to the arrays without having one array of objects for every user but instead one array containing all objects: (6) [Object, Object, Object, Object, Object, Object]

I even tried to do something else wich i thought will help by adding .flatMap to my component as follows:

ngOnInit() {
this.results = this.postsService.getUserPosts()
 .flatMap(posts => this.posts = posts)
  .subscribe(posts => {  this.posts = posts
    console.log(posts);
  })    

}

but i got two separate arrays, each array is related to each user with all his posts, *ngFor only picks the latest user and ignore the other posts from the other user:

(3) [Object, Object, Object] 0: Object 1: Object 2: Object (3) [Object, Object, Object] 0: Object 1: Object 2: Object

Solution expected: merge both arrays into one array as: (6) [Object, Object, Object, Object, Object, Object]

Can anyone please help in figuring out how to solve this problem? Thanks a lot!!

Answer 1

Thank you to Julia Passynkova for her answer to allow to solve my problem. this the final solution by adding the last line of concat.apply() to my service:

getUserPosts(): Observable<any[]>{
return this.http.get(this.apiUserURL + this.userId + '/')
    .map((response: Response)  => response.json())  
    .flatMap((users) => {
        return Observable.forkJoin(
            users.map(user=>
                this.http.get(this.apiUserPostURL + user.id)
                .flatMap(response => response.json())   
            )   
        )
    }).map(x=> [].concat.apply([],x))

}