Rxjs merge two observables with nested array

I would use a mixture of switchMap and forkJoin to merge the results of all your requests:

ngOnInit(): void {

  this.pictureService.getUsers(params)
    .pipe(
      switchMap((userListObj) => {
        // Create a list of observables that will result in completed User objects:
        const obs = userListObj.data.users.map((user) => this.extendUser(user));        
        return forkJoin([of(userListObj), forkJoin(obs)]);
      }),
      // Add the completed User-objects to the IUsersList wrapper:
      map(([userListObj, users]) => ({...userListObj, data: {...userListObj.data, users: users }})),
      tap((res) => {
        this.list = res.data.users;
        this.total = res.data.totalElements;
      }),
      finalize(() => (this.isLoading = false))
    )
    .subscribe();
}

extendUser(user: User) {
  // Assign the updated picture-url, which is fetched via 'getById()'
  return this.pictureService.getById(user.id).pipe(
    map((p) => ({ ...user, picture: p.picture }))
  );
}

If you don't mind a delay from you can do this with switchMap and concatAll or mergeAll. Both concat and merge will execute the inner observables one by one, but concat will preserve the order where merge will run everything at once and not care about order.

this.userService.getUsers(params).pipe(
  map(res => res.data.users.map(user => this.pictureService.getById(user.id).pipe(
     map(img => ({...user, picture: img.picture }))
  ))),
  concatAll(),
  toArray()
)

The problem here is that this could be slow. You could lazy load the images and update the array as images are loaded.

getUsersRequestSubject = new Subject<GetUserParams>();

private getUserData$ = getUsersRequestSubject.pipe(
  switchMap(p => this.userService.getUsers(p)),
  map(users => users.map(x => ({ ...x, picture: '/assets/notfound.png' }))),
  shareReplay()
);

/** Return each image individually. */
private getImage$ = getUserData$.pipe(
  map(users => users.map(user => this.pictureService.getById(user.id))),
  concatAll()
);

users$ = merge(
  this.getUserData$.pipe(map(users => (_) => users)),
  this.getImage$.pipe(map(img => (users) => {
    users.find(x => x.id === img.id)?.picture = img.picture;
    return users;
  }))
).pipe(
  startWith((_) => []), // optional if you want an initial value.
  scan((users, reducer) => reducer(users), [])
);

Here's what's happening:

• When the user list needs to be updated call geUsersRequestSubject.next(params).
• Once that happens getUserData$ executes (as long as user$ is subscribed to). This retrieves the users and sets the picture value to a not found image.
• getImage$ will use the result of getUserData$ to emit picture data one by one to.
• user$ will use a merge of observables that return reducer functions. The one from getUserData$ will replace the users array, while the one from getImage$ will update the users array with the image.
• These reducers are executed by the scan function, which will pass the prior state into the reducer function to get the next state.

If you haven't gathered what will happen is that the user list will update with the result of the user api call immediately with each user having a not found image. Then as the api calls to retrieve images execute, each not found image will get replaced.

  data$ = this.service.getData().pipe(

    //from the response get only the "users"
    map((userListObj: any) => userListObj.data.users),
    
    //use switchMap to use forkJoin to execute
    //an array of observables
    switchMap((users: any[]) => {
      return forkJoin(

        //see how convert the array of users
        //in an array of observables
        users.map((user: any) => this.service.getPictureById(user.id))
      ).pipe(
        
        //transform the array of response using the 
        //users. see how use map

        map((pictures: any[]) =>
          pictures.map((x: any, index: number) => ({
            ...users[index],
            picture: x.picture,
          }))
        )
      );
    })
  );

Don't confused, the map((userListObj: any)=>.. and the map((pictures: any[]) => are rxjs/operator, the others map users.map((user: any) => and pictures.map((x: any, index: number) are map of one array.

Update getting the idea of Daniel Gimenez I made this stackblitz