Части For Loop не стреляют в порядке

Question

Используя Angular 5, я создал функцию, которая получает данные из веб-запроса. Основываясь на данных, полученных из запроса, у меня второй запуск веб-запроса на основе полученных System.Title. Однако функция запускает части первого цикла и ожидает запуска второго цикла до конца первого цикла. Как я могу это исправить?

Вот ТС:

selectedDocType(title){    
    this.http.get("https://test.com/items?$select=Title,Image,Source/Title,System/Title&$filter=Title eq '" + title + "'").subscribe(data => {

      for (let i = 0; i < data['value'].length; i++) {
          let system = data['value'][i].System.Title;

          // REVIEW: FIRING AT END OF MAIN LOOP
          this.http.get("https://test.com/items?$select=Title,Location,Image&$filter=Title eq '" + system + "'").subscribe(data => {

            for (let i = 0; i < data['value'].length; i++) {
                var systemlocation = data['value'][i].Location;
                this.location = data['value'][i].Location;
                console.log("this.location", this.location)  // REVIEW: LAST LOG IN CONSOLE; DEFINED CORRECTLY
            }
          });

        let sources = data['value'][i].Source;
        for (let i = 0; i < sources.length; i++) {
            console.log("this.location", this.location) // REVIEW: UNDEFINED    
        };
        console.log("at end of main loop") // REVIEW: FIRES BEFORE LAST LOG
      }
    });
}