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

Preserve component state in Angular 4 by saving it when navigating to a different component

Retrieve user information by their unique user ID from a MongoDB database using a Node, Express, and TypeScript API

Is it possible to transform all values in arrays to 0s in JavaScript/p5.js during the copying process?

Validation of Date in Angular 5 (with specified minimum and maximum dates)

Encountering a JavaScript Error: "e is null" while utilizing assert for checking JavaScript alert text

TypeORM's Polymorphic Relationship fails to retrieve data from the parent entity

Flipping json stringify safety

Implementing AJAX to dynamically update information based on user's selection from a dropdown

Uploading multiple files simultaneously in React

Encountering an error while running npm install - package.json data parsing failed

The functionality of Node.js middleware is not functioning correctly

Clicking on an icon to initiate rotation (Material UI)

No styles are appearing on a specific element after running a specific jQuery function on that element within a Vue page

Transforming FormData string key names into a Json Object that is easily accessible

Developing Angular components with nested routes and navigation menu

Issue encountered where Moment locale functionality is working in local development environment, but not functioning properly in the

Make leaflet function operate synchronously

successful callback after passport registration

What is the method for extracting a value that is being displayed beneath a text in a React component using Selenium?

Enable users to choose either today's date or a future date by implementing AngularJS UI Bootstrap