Looping through data and displaying only last set of items in Angular

Question

From the API I am fetching the list of categories with name and ID and then inside this list of categories I integrate the list of lectures from the second ID. This list of lectures must be different for every category (based on ID)

In my console.log() it works fine, but on the frontend I am somehow overwriting the allLectures array so that is the reason why in the frontend I get displayed only the lectures for the last category.

This lectures must be different for every category.

Typescript code:

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


  getCategories() {
    this.categoryListSubs = this.categoryService
      .getAllCategories(this.limit, this.offset)
      .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 {
    console.log(id);

    this.isLoaded = false;

    this.allLecturesOfCategorySubs = this.categoryService
      .getLecturesOfCategory(id, this.limit, this.offset, this.queryParams.sort)
      .subscribe((allLectures: AllLecture) => {
        this.allLectures = allLectures.results;
        console.log(this.allLectures);

        this.isLoaded = true;
      });
  }
}

HTML code:

<div class="container mb-3 pt-5">
  <div class="categories" *ngFor="let category of categoryList">
    <div class="">
      <div class="d-flex mt-4 category-button py-1">
        <h2>
          {{ category.name }} <span>({{ category.lectures }})</span>
        </h2>
        <a
          class="btn rounded-full"
          [routerLink]="['/all-lectures']"
          [queryParams]="{ page: '1', sort: 'popularity' }"
        >
          All lectures <fa-icon [icon]="faArrowRight"></fa-icon>
        </a>
      </div>
      <div class="videos">
        <div class="grid-4">
          <div *ngFor="let lecture of allLectures">
            <app-video-item
              [latestLecturesList]="lecture"
            ></app-video-item>
          </div>
        </div>
      </div>
    </div>
  </div>
 

Thanks to everyone who will try to help.

Answer 1

You call getLectures per categoryID and you overwrite the result with this.allLectures = allLectures.results; in getLectures.

Try modifing it to this.allLectures.push(...allLectures.results);.