Retrieve the output of forkJoin subscription in Angular 6 using rxJs 6

A Straightforward Example:

const tasks = [];
for (let i = 0; i < this.initialData.length; i++) {
      tasks.push( this.taskService.getDetails(this.id1[i], this.id2[i])
       };

combineLatest(...tasks).subscribe(taskGroup => {
    console.log(taskGroup.id);
});

the output is 1 2 3 4 5

A More Complex Example and a Challenge:

private handleTask(foot) {
    const tasks = [];
    for (let i = 0; i < this.initialData.length; i++) {
      tasks.push( this.taskService.getDetails(this.id1[i], this.id2[i])
    };

    combineLatest(...tasks).subscribe(taskGroup => {
      console.log(taskGroup);
      // How can I update foot.param with all taskGroup ids?
    });

    return this.taskService.getFoot(foot);
}

the function executes this:

return this.taskService.getFoot(foot);

before this:

console.log(taskGroup);

Is there a way to ensure that the function waits for the completion of the subscription, and then update foot.param with all taskGroup ids before returning?

Answer №1

To ensure proper functionality, the todo function needs to be asynchronous and return an Observable:

private async todo(item): Observable<any> {
    const observables = [];
    for (let i = 0; i < this.initialList.length; i++) {
      observables.push(this.dataService.getDetails(this.idValues1[i], this.idValues2[i])
    };

    // The dataGroup array contains the most recent values of all observables
    return forkJoin(observables).map((dataGroup: any[]) => {
        // Perform any necessary operations on the item before calling the function
        // It's important to handle merging if getFoo also returns an observable
        // Assuming getFoo returns a regular value for simplicity
        return this.dataService.getFoo(item);
    });
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unleash the power of drag-and-drop functionality with cdkDrop

I am currently tackling a project that requires the implementation of a drop zone functionality where elements can be dragged from a list and dropped in a zone for free movement. I intend to utilize a cdkDropList for the zone due to its comprehensive list ...

Choosing the most suitable stylesheet in Angular 8 when multiple CSS files are present

In my project, I have several CSS stylesheets for angular components. I am curious if there is a method to designate a preferred stylesheet when multiple sheets loaded by a component contain the same styles but with different values. ...

In Angular components, data cannot be updated without refreshing the page when using setInterval()

Here's the Angular component I'm working with: export class UserListComponent implements OnInit, OnDestroy { private _subscriptions: Subscription; private _users: User[] = []; private _clickableUser: boolean = true; constructor( priv ...

Factory function in Angular for translating using arrow syntax

When I include TranslateModule using the following code: TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: HttpLoaderFactory, deps: [HttpClient] } }) where export function HttpLoaderFactory(http: H ...

Set up and run a SpringBoot + Angular web application on an external IIS server

When it comes to running a Spring Boot application locally, it's as simple as running it with the spring-boot:run command or executing the main class of the project. However, deploying the same application on an IIS Server can be a bit more challengin ...

Why should TypeScript interfaces be utilized in Angular services for defining type information?

What are the benefits of creating an interface for an Angular service as opposed to simply exporting the service class and using that for type information? For example: class Dashboard { constructor(ui: IUiService){} } vs class Dashboard { cons ...

Angular interceptors in sequence

I'm looking to implement a queue system in Angular. My goal is to store requests in an array and process them sequentially, moving on to the next request once the current one is successful. Below is the code I tried, but unfortunately it didn't ...

Enhancing React Native View and other component properties using styled-components

Utilizing styled-components for styling in my React Native app using Typescript has been effective. I recently crafted a StyledComponent to style a View component, but encountered an error when attempting to extend the ViewProps: The type '{ children: ...

Is there a missing .fillGeometry in the Figma plugin VectorNode?

The documentation for VectorNode mentions a property called fillGeometry. Contrary to this, TypeScript indicates that "property 'fillGeometry' does not exist on type 'VectorNode'". https://i.sstatic.net/ICfdw.png I seem to be missing ...

What is the solution to fixing the error message "Cannot redeclare block-scoped variable 'ngDevMode' "?

I encountered this error: ERROR in node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'. src/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451 ...

Highlighting Navbar Items

Can anyone provide advice on how to highlight a navbar item when clicked? I'm unsure if I should use Angular or CSS for this. Any guidance would be greatly appreciated. <div class="collapse navbar-collapse" id="navbarNav"> <ul class ...

Angular2 is throwing a Typescript Reference error because 'is not defined' in the context

I've been grappling with this specific error for the last couple of hours, and it's definitely not a run-of-the-mill undefined error. The issue arises when I define a value in the webpack plugins section (for a global variable) to serve as an API ...

Error: Unable to access _rawValidators property of null object

I'm currently facing an issue with formgroup and formcontrol in Angular. When I run ng serve, it's showing an error in the console. Does anyone have a solution for this? TypeError: Cannot read properties of null (reading '_rawValidators&a ...

While not all attributes of the response object are null, there are certain object attributes that are displayed as null

My component is responsible for displaying data in a table that is fetched from Firestore. Although the data retrieved is complete, I am noticing that the settings attribute is often null when accessed in JSX. Occasionally, I do see the correct output, but ...

Using capital letters with interpolated language keys

The issue: I'm currently facing a problem with i18next. It allows variable interpolation in strings, like "AddNew": "Add new {{item}}". However, I have a language where the grammar requires "{{item}}" to be the first word, as in "AddNew": "{{item}} t ...

React textarea trigger function on blur event

https://codesandbox.io/s/react-textarea-callback-on-blur-yoh8n?file=/src/App.tsx When working with a textarea in React, I have two main objectives: To remove focus and reset certain states when the user presses "Escape" To trigger a callback function (sa ...

What do you do when schema.parseAsync cannot be found?

Currently facing an issue with zod validation in my Node.js environment, specifically encountering the error: TypeError: schema.parseAsync is not a function Despite attempting various solutions like re-importing and troubleshooting, I am unable to resol ...

What steps should be taken to trigger an API call once 3 characters have been entered into a field

In my current project, I am dealing with a parent and child component setup. The child component includes an input field that will emit the user-entered value to the parent component using the following syntax: <parent-component (sendInputValue)="g ...

There seems to be an issue with the type error regarding the return of the mysql2/promise

As I delve into using the mysql2/promise library with Typescript, I've encountered a puzzling issue regarding the return type of the query method. Despite my best efforts, I can't seem to resolve an error in my code. Here is a snippet from my c ...

I recently upgraded my Angular version from 5 to 8, and encountered an unexpected error with the toastr plugin

I recently upgraded my Angular version from 5 to 8 and encountered an issue. Upon starting the server with 'ng serve', I received the following error in the console: Uncaught TypeError: core_1.style is not a function at Object../node_modules/ng ...