Загрузка Javascript и отображение данных из HTTP-запроса

В моем приложении у меня есть сервер с интерфейсом отдыха, который обрабатывает все записи в базе данных. Когда пользователь входит в приложение, все пользовательские данные должны быть загружены и отображены из моделей базы данных в используемые модели. Разница в том, что модели базы данных содержат только идентификаторы своих дочерних объектов, в то время как у нормальной модели дочерний объект наследуется напрямую. Итак, чтобы загрузить все объекты через http-запрос из базы данных и сопоставить их, я создаю это:

class SomeClass {
  private loadProjectData(projectId: string): void {
    let s: Sheet;
    let d: Dashboard;
    this.databaseService.getDocument("Projects", projectId).subscribe(
      (project: ProjectDB) => {
        this.project = new Project(project.id, project.name, project.theme, []);
        for (const dash of project.dashboards) {
          this.databaseService
            .getDocument("Dashboards", dash)
            .subscribe((dashboard: DashboardDB) => {
              d = new Dashboard(dashboard.id, dashboard.name, []);
              for (const shee of dashboard.sheets) {
                this.databaseService
                  .getDocument("Sheets", shee)
                  .subscribe((sheet: SheetDB) => {
                    s = new Sheet(sheet.id, sheet.name, []);
                    for (const wid of sheet.widgets) {
                      this.databaseService
                        .getDocument("Widgets", wid)
                        .subscribe((widget: WidgetDB) => {
                          // TODO check widget type
                          s.widgets.push(
                            new Widget(
                              widget.id,
                              widget.name,
                              widget.position,
                              widget.isDeveloped,
                              widget.type,
                            ),
                          );
                          this.dataService.changeProjectData(this.project);
                        });
                    }
                  });
              }
              d.sheets.push(s);
              this.dataService.changeProjectData(this.project);
            });
          this.project.dashboards.push(d);
          this.dataService.changeProjectData(this.project);
        }
        console.info("Project", this.project);
        this.router.navigate(["dashboard"]);
      },
      err => {
        console.info("Error loading project data from database ", err);
      },
    );
  }
}

Код проходит через каждую иерархию: Project -> Dashboards -> Sheets -> Widgetes. Идея состоит в том, что при загрузке каждого нижнего иерархического элемента он получает толчок к верхнему материнскому элементу. Но при выполнении кода все объекты, кроме проекта, не определены. Кто-нибудь знает, как это решить? Заранее спасибо.