Generate an array of objects by combining three separate arrays of objects

Question

Generate an array of objects by combining three separate arrays of objects

There are 3 private methods in my Angular component that return arrays of objects.

I want to combine these arrays into one array containing all the objects, as they all have the same class.

Here is the object structure:

 export class TimelineItemDto {
    id: any;
    creatorAvatarUrl: string;
    categoryName: string;
    creatorName: string;
    subcategoryName: string;
    description: string;
    type: string;
}

Below is the code for the component:

export class HomeComponent implements OnInit {

  constructor(private _router: Router, private http: HttpClient) { }

  color: ThemePalette = 'primary';
  classes: TimelineItemDto[] = [];
  requests: TimelineItemDto[] = [];
  courses: TimelineItemDto[] = [];
  timelineItems: TimelineItemDto[] = [];
  checked = false;
  disabled = false;

  ngOnInit(): void {
    const token = localStorage.getItem('jwt');
    if (!token) {
      this._router.navigate(['/main/login']);
    }

    this.getTimelineItems();
  }

  getCourses(): any {
    return this.http
      .get(environment.baseUrl + '/Course/GetCourses')
      .subscribe((data: TimelineItemDto[]) => {
        return data;
      });
  }

  getClasses(): any {
    return this.http
      .get(environment.baseUrl + '/Class/GetClasses')
      .subscribe((data: TimelineItemDto[]) => {
        return data;
      });
  }

  getRequest(): any {
    return this.http
      .get(environment.baseUrl + '/Requests/GetRequests')
      .subscribe((data: TimelineItemDto[]) => {
        return data;
      });
  }

  getTimelineItems(): any {
    var courses = this.getCourses();
    var classes = this.getClasses();
    var requests = this.getRequest();
    this.timelineItems = [...classes, ...courses, ...requests];
    console.log(this.timelineItems);
  }
}

At this line

this.timelineItems = [...classes, ...courses, ...requests];

, I encounter the following error:

core.js:4197 ERROR TypeError: classes is not iterable

How can I resolve this issue?

javascript angular typescript

Answer 1

Answer №1

The Issue

Let's examine the code snippet below

  getCourses(): any {
    return this.http
      .get(environment.baseUrl + '/Course/GetCourses')
      .subscribe((data: TimelineItemDto[]) => {
        return data;
      });
  }

The code above utilizes the .get() method followed by the .subscription() method. This reveals that the function actually yields a subscription rather than an Observable. Therefore, attempting to iterate over this subscription results in an error.

Resolution

To address this issue, there are multiple approaches available. Below is my proposed solution:

Fetch classes as Observable
Retrieve requests as Observable
Obtain courses as Observable
Merge these 3 Observables into a single Observable
Subscribe to the new Observable

Refer to the following revised code

   constructor(private _router: Router, private http: HttpClient) {}
  color: ThemePalette = "primary";
  timelineItems: TimelineItemDto[] = []
  getCourses = () =>
    this.http.get<TimelineItemDto[]>(
      environment.baseUrl + "/Course/GetCourses"
    );

  getClasses = () =>
    this.http.get<TimelineItemDto[]>(environment.baseUrl + "/Class/GetClasses");

  getRequest = () =>
    this.http.get<TimelineItemDto[]>(
      environment.baseUrl + "/Requests/GetRequests"
    );

  classes$: Observable<TimelineItemDto[]> = this.getClasses();
  requests$: Observable<TimelineItemDto[]> = this.getRequest();
  courses$: Observable<TimelineItemDto[]> = this.getCourses();
  timelineItems$: Observable<TimelineItemDto[]> = combineLatest([
    this.classes$,
    this.courses$,
    this.requests$
  ]).pipe(
    map(([classes, courses, requests]) => [...classes, ...courses, ...requests])
  );
  checked = false;
  disabled = false;
  ngOnInit(): void {
    const token = localStorage.getItem("jwt");
    if (!token) {
      this._router.navigate(["/main/login"]);
    }

    this.getTimelineItems();
  }

  getTimelineItems(): any {
    this.timelineItems$.subscribe({
      next: (items) => this.timelineItems = items
    })
  }

View this solution on stackblitz

Answer 2

The Issue

Let's examine the code snippet below

  getCourses(): any {
    return this.http
      .get(environment.baseUrl + '/Course/GetCourses')
      .subscribe((data: TimelineItemDto[]) => {
        return data;
      });
  }

The code above utilizes the .get() method followed by the .subscription() method. This reveals that the function actually yields a subscription rather than an Observable. Therefore, attempting to iterate over this subscription results in an error.

Resolution

To address this issue, there are multiple approaches available. Below is my proposed solution:

Fetch classes as Observable
Retrieve requests as Observable
Obtain courses as Observable
Merge these 3 Observables into a single Observable
Subscribe to the new Observable

Refer to the following revised code

   constructor(private _router: Router, private http: HttpClient) {}
  color: ThemePalette = "primary";
  timelineItems: TimelineItemDto[] = []
  getCourses = () =>
    this.http.get<TimelineItemDto[]>(
      environment.baseUrl + "/Course/GetCourses"
    );

  getClasses = () =>
    this.http.get<TimelineItemDto[]>(environment.baseUrl + "/Class/GetClasses");

  getRequest = () =>
    this.http.get<TimelineItemDto[]>(
      environment.baseUrl + "/Requests/GetRequests"
    );

  classes$: Observable<TimelineItemDto[]> = this.getClasses();
  requests$: Observable<TimelineItemDto[]> = this.getRequest();
  courses$: Observable<TimelineItemDto[]> = this.getCourses();
  timelineItems$: Observable<TimelineItemDto[]> = combineLatest([
    this.classes$,
    this.courses$,
    this.requests$
  ]).pipe(
    map(([classes, courses, requests]) => [...classes, ...courses, ...requests])
  );
  checked = false;
  disabled = false;
  ngOnInit(): void {
    const token = localStorage.getItem("jwt");
    if (!token) {
      this._router.navigate(["/main/login"]);
    }

    this.getTimelineItems();
  }

  getTimelineItems(): any {
    this.timelineItems$.subscribe({
      next: (items) => this.timelineItems = items
    })
  }

View this solution on stackblitz

Answer 3

Answer №2

To understand how asynchronous data operates, it is essential to refer to this source for detailed information on async data handling.

In essence, one must await the emission of data by the source. In this scenario, waiting for the RxJS observables to emit values before attempting to assign them is crucial. Moreover, when subscribing to multiple observables, utilizing the RxJS forkJoin function can trigger requests concurrently.

export class HomeComponent implements OnInit {
  constructor(private _router: Router, private http: HttpClient) { }

  color: ThemePalette = 'primary';
  classes: TimelineItemDto[] = [];
  requests: TimelineItemDto[] = [];
  courses: TimelineItemDto[] = [];
  timelineItems: TimelineItemDto[] = [];

  checked = false;
  disabled = false;
  ngOnInit(): void {
    const token = localStorage.getItem('jwt');
    if (!token) {
      this._router.navigate(['/main/login']);
    }

    this.getTimelineItems();
  }

  getTimelineItems(): any {
    forkJoin(
      <Observable<TimelineItemDto[]>>this.http.get(environment.baseUrl + '/Class/GetClasses'),
      <Observable<TimelineItemDto[]>>this.http.get(environment.baseUrl + '/Course/GetCourses'),
      <Observable<TimelineItemDto[]>>this.http.get(environment.baseUrl + '/Requests/GetRequests')
    ).subscribe({
      next: ([classes, courses, requests]) => {
        this.classes = classes;
        this.courses = courses;
        this.requests = requests;
        this.timelineItems = [...classes, ...courses, ...requests];
        console.log(this.timelineItems);
      },
      error: error => {
        console.log('handle error');
      }
    });
  }
}

It is advisable to review the aforementioned link. The variable this.timelineItems may remain empty when accessed outside the subscription since it might not have been assigned values yet.

In simple terms, this.timelineItems is only accessible within the subscription scope.

Answer 4

To understand how asynchronous data operates, it is essential to refer to this source for detailed information on async data handling.

In essence, one must await the emission of data by the source. In this scenario, waiting for the RxJS observables to emit values before attempting to assign them is crucial. Moreover, when subscribing to multiple observables, utilizing the RxJS forkJoin function can trigger requests concurrently.

export class HomeComponent implements OnInit {
  constructor(private _router: Router, private http: HttpClient) { }

  color: ThemePalette = 'primary';
  classes: TimelineItemDto[] = [];
  requests: TimelineItemDto[] = [];
  courses: TimelineItemDto[] = [];
  timelineItems: TimelineItemDto[] = [];

  checked = false;
  disabled = false;
  ngOnInit(): void {
    const token = localStorage.getItem('jwt');
    if (!token) {
      this._router.navigate(['/main/login']);
    }

    this.getTimelineItems();
  }

  getTimelineItems(): any {
    forkJoin(
      <Observable<TimelineItemDto[]>>this.http.get(environment.baseUrl + '/Class/GetClasses'),
      <Observable<TimelineItemDto[]>>this.http.get(environment.baseUrl + '/Course/GetCourses'),
      <Observable<TimelineItemDto[]>>this.http.get(environment.baseUrl + '/Requests/GetRequests')
    ).subscribe({
      next: ([classes, courses, requests]) => {
        this.classes = classes;
        this.courses = courses;
        this.requests = requests;
        this.timelineItems = [...classes, ...courses, ...requests];
        console.log(this.timelineItems);
      },
      error: error => {
        console.log('handle error');
      }
    });
  }
}

It is advisable to review the aforementioned link. The variable this.timelineItems may remain empty when accessed outside the subscription since it might not have been assigned values yet.

In simple terms, this.timelineItems is only accessible within the subscription scope.

Generate an array of objects by combining three separate arrays of objects

Answer №1

The Issue

Resolution

Answer №2

Similar questions

Guide to transferring parameters from one function to another in Javascript

Dygraphs: Utilizing two y-axes in a single series

What is the best way to manage the back button using jQuery?

Angular2 form builder generating dynamic forms based on results of asynchronous calls

Using renderProps in combination with TypeScript

Setting a radio button as default based on a variable value can be accomplished by following a few

What is the reason for the failure of this react ternary return statement?

Challenges with Nested Reactive Form in Angular 4

The UNHANDLEDREJECTION callback was triggered prematurely during asynchronous parallel execution

How to transfer data from JavaScript to PHP using AJAX

I'm seeking an easy method to adjust the x and y coordinates of a popup rectangle with a fixed size. Can anyone provide

Personalized Carousel using Ng-Bootstrap, showcasing image and description data fields

I am having an issue with my registration form in node.js where it does not redirect after submitting

underscore's _.each() method for callback functions

Issues have been identified with React Native UI components RCTBubblingEventBlock and RCTDirectEventBlock not functioning as expected

Implementing an extended interface as an argument in a function

Is there a way in JavaScript to format an array's output so that numbers are displayed with only two decimal places?

Uncovering design elements from Material UI components

Executing multiple HTTP requests simultaneously in groups using an asynchronous for loop for each individual request

Having trouble navigating to the bottom of a VUEJS app?