How to return an Observable inside a subscription?

Question

EDIT: See Kurt Hamilton's answer for the solution.

I'm calling an API to return the values of some settings in settings.service.ts. In settings.component.ts these need to be returned to fill a form - it displays loading when the API call isn't finished yet.

It's working with the 'return of(fakeData)'. However, I can't figure out how to return the 'realData'.

Instead of console.log(realData) I want to return that instead of the fakeData.

Some help would be nice, thanks in advance!

Beneath are the relevant parts of the code.

settings.service.ts:

export interface Settings {
  setting1: boolean;
  setting2: string;
}

const fakeData = {
  setting1: true,
  setting2: 'test'
};

@Injectable()
export class SettingsService {
  defaultSettings: DefaultSettings[];

  constructor(private apiService: ApiService) { }

  loadSettings(): Observable<Settings> {
    this.apiService.getDefaultSettings().subscribe( defaultSettings => {
      // defaultSettings is needed for when value1 or value2 is 'null'
      // not implemented yet, but therefore this nested subscription structure
      this.defaultSettings = defaultSettings;

      const value1 = this.apiService.getSpecificSetting('setting1');
      const value2 = this.apiService.getSpecificSetting('setting2');

      forkJoin([value1, value2]).subscribe( result => {
        const realData = {
          setting1: result[0],
          setting2: result[1],
        };

        console.log(realData);
        // return of(settingsFound); not possible here ...
      });
    });

    return of(fakeData);
  }
}

settings.component.ts

settings: Observable<Settings>;

ngOnInit() {
  this.settings = this.settingsService.loadSettings().pipe(
    tap(settings => {
      this.settingsForm.patchValue(settings);
    })
  );
}

Answer 1

Use concatMap or switchMap to run a new observable (in your case a forkJoin) after another observable.

@Injectable()
export class SettingsService {
  defaultSettings: DefaultSettings[];

  constructor(private apiService: ApiService) { }

  loadSettings(): Observable<Settings> {
    return this.apiService.getDefaultSettings().pipe(
      // save default settings
      // this may not be required if you only need default settings for the forkJoin
      tap(defaultSettings => this.defaultSettings = defaultSettings),
      // now run the next observable
      concatMap(defaultSettings => {
        return forkJoin({
          setting1: this.apiService.getSpecificSetting('setting1'),
          setting2: this.apiService.getSpecificSetting('setting2')
        });
      }),
      // now map the result of the forkJoin to the value to want to return
      // map won't be required in this case, 
      // as the arg going into forkJoin matches the desired return structure
      // I left it in for completeness
      map(result => {
        const realData = {
          setting1: result.setting1,
          setting2: result.setting2,
        };

        console.log(realData);

        return realData;
      })
    );
  }
}

Condensed version

Without my annotations and the redundant calls, the finished result looks like this:

@Injectable()
export class SettingsService {
  constructor(private apiService: ApiService) { }

  loadSettings(): Observable<Settings> {
    return this.apiService.getDefaultSettings().pipe(
      concatMap(defaultSettings => forkJoin({
        setting1: this.apiService.getSpecificSetting('setting1'),
        setting2: this.apiService.getSpecificSetting('setting2')
      }))
    );
  }
}