Angularの非同期通信で、最初のリクエストが返ってきてから次のリクエストを実行したい

Question

Angular入門者です。

あるサーバ1で取得した値をもとに、別のサーバ2から値をとりたいような場合、
どのように記述するのが正しいのでしょうか？

以下のようなコードを書いてみたのですが、
サーバ1へのリクエストが返ってくる前に
サーバ2へのリクエストが実行されてしまうからなのか、うまくいきません。

サーバ1の結果が終わったのを待って、次の処理を進めるみたいな処理を
どう記述するかを教えてください。

ど素人質問で申し訳ありませんが、よろしくお願いします。

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { Http } from '@angular/http'
import { Observable } from 'rxjs'

@Injectable()
export class SampleService {

    constructor(private http: Http) { }

    getNames(){
        let url1 = 'http://path.to/server1';
        let url2 = 'http://path.to/server2';

        let ret = new Subject<any> ();
    
        // サーバ 1 からIDを取得
        let idlist = [];
        this.http.get(url1).subscribe(
            (res: any) => {
                for(let i = 0; i < res.result.length; i++){
                    idlist.push(res.result[i].id);
                }
            },
            error => {
                console.log('error');
            }
        )

        // サーバ 1 で取得したIDをキーにサーバ 2 から名前を取得
        let namelist = [];
        for(let i = 0; i < idlist.length; i++){
            this.http.get(url2 + '?id=' + idlist[i]).subscribe(
                (res: any) => {
                        namelist.push(res.result.name);
                },
                error => {
                    console.log('error');
                }
            )
        }

        ret.next(namelist);
        ret.complete();

    }

}

Answer 1

サーバ1の結果が終わったのを待って、次の処理を進めるみたいな処理を

どう記述するかを教えてください。

mergeMapを使うとシンプルに書けます。
書き方はこちらが参考になると思います！