I am fetching list of categories with the name and ID from the first API and then inside this list of categories I integrate the list of lectures, which display the lectures based on the ID from the category (from the second API).

Everything works fine, the only issue is that I am getting the lectures in WRONG order, like the wrong ID is passed in my function.

My typescript code:

 ngOnInit(): void {
   this.getCategories();
   }


getCategories() {
    this.isLoaded = false;

    this.categoryListSubs = this.categoryService
      .getAllCategories()
      .subscribe((categories: any) => {
        this.allDataFromApi = categories;
        this.categoryList = categories.results;

        this.isLoaded = true;

        this.categoryList.forEach((el: any) => {
          this.categoryID = el.id;
          this.getLectures(this.categoryID);
        });
      });
  }

  getLectures(id: any): void {
    this.isLoaded = false;

    this.lecturesArray = [];
    this.allLecturesOfCategorySubs = this.categoryService
      .getLecturesOfCategoryViewAll(id)
      .subscribe((allLectures: AllLecture) => {
        this.lecturesArray.push(allLectures.results);
        this.isLoaded = true;
      });
  }

My HTML code:

    <div
      class="categories"
      *ngFor="let category of categoryList; let i = index"
    >
        <div class="d-flex mt-4 category-button py-1">
          <h2>
            {{ category.name }} <span>({{ category.lectures }})</span>
          </h2>
        </div>
        <div class="videos">     
            <div *ngFor="let lecture of lecturesArray[i]">
              <app-video-item
                [latestLecturesList]="lecture"
                [listenToListView]="false"
              ></app-video-item>
            </div>
        </div>
    </div>

So if i have then displayed 3 categories like computer science, biology, network the lectures which are in category biology are displayed under computer science and lectures which are in network category are displayed under biology and so on..