For循环的部分未按顺序触发

Question

使用Angular 5，我创建了一个从Web请求中获取数据的函数。根据从请求收到的数据，我根据收到的System.Title发出第二个Web请求。但是，该函数触发第一个循环的各个部分并等待触发第二个循环，直到第一个循环结束。我该如何解决这个问题？

这是TS：

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
      }
    });
}