Angular: Verify that all services are fully executed before proceeding to the next step

Question

Angular: Verify that all services are fully executed before proceeding to the next step

We have adopted Angular for our project. Our component receives data from an API, which is then processed by Data Services. These services transform the data by combining first and last names, rounding dollar amounts, performing calculations, etc. The final step involves populating the Sales year in a Dropdown menu after parsing all the information.

this.webStoreSearchHttpService.GetAllCustomerSalesData(this.customerId).subscribe((response) => {

  this.customerList = customerDataService.createCustomerList(response);
  this.productList = customerDataService.createProductAnalysis(response);
  this.salesList = customerDataService.createSalesList(response);
  this.salesYearList = customerDataService.createYearList(response);

  this.salesYearItemCurrent = _.cloneDeep(this.salesYearList[0]);   <--- this is used for a Mat Select Dropdown

However, the correlated data does not appear in the web dropdown selection because the Data Services are not finished parsing/creating yet, even though they are called within the original API subscribe function.

My goal is to ensure that all four Data Services are completely executed before populating the salesYear. Is there a way to achieve this using Angular typescript?

The Data Services can be executed in parallel, but the final step of populating the salesYear in the dropdown must follow.

Note that the methods return class arrays, not promises or observables.

javascript angular typescript angular8

Answer 1

Answer №1

Latest Update

Your input stated that the methods in the customerDataService return class arrays instead of promises or observables, suggesting that external waitability for asynchronous calls is limited. In this case, modifying the return value of the customerDataService methods is necessary as you aim to ensure completion of all 4 data services. It is presumed that these methods involve asynchronous tasks based on your statement, "What I am trying to do, is make sure all 4 Data services are totally complete."

Previous Version

In addressing your query, understanding the return type of the customerDataService methods is essential. Do these methods return a Promise or an Observable? Depending on this, one can employ either Promise.all or the forkJoin operator to await the completion of all methods before executing the select population. Below is an example utilizing observables:

this.webStoreSearchHttpService.GetAllCustomerSalesData(this.customerId).subscribe(response => {
    forkJoin([
        customerDataService.createCustomerList(response),
        customerDataService.createProductAnalysis(response),
        customerDataService.createSalesList(response),
        customerDataService.createYearList(response)
    ]).subscribe(([customerList, productList, salesList, salesYearList]) => {
        this.customerList = customerList;
        this.productList = productList;
        this.salesList = salesList;
        this.salesYearList = salesYearList;
        this.salesYearItemCurrent = _.cloneDeep(this.salesYearList[0]);
    });
});

To optimize and eliminate the nested subscription for better readability:

this.webStoreSearchHttpService.GetAllCustomerSalesData(this.customerId).pipe(
    flatMap(response => 
        forkJoin([
            customerDataService.createCustomerList(response),
            customerDataService.createProductAnalysis(response),
            customerDataService.createSalesList(response),
            customerDataService.createYearList(response)
        ])
    )
).subscribe(([customerList, productList, salesList, salesYearList]) => {
    this.customerList = customerList;
    this.productList = productList;
    this.salesList = salesList;
    this.salesYearList = salesYearList;
    this.salesYearItemCurrent = _.cloneDeep(this.salesYearList[0]);
});

Answer 2

Latest Update

Your input stated that the methods in the customerDataService return class arrays instead of promises or observables, suggesting that external waitability for asynchronous calls is limited. In this case, modifying the return value of the customerDataService methods is necessary as you aim to ensure completion of all 4 data services. It is presumed that these methods involve asynchronous tasks based on your statement, "What I am trying to do, is make sure all 4 Data services are totally complete."

Previous Version

In addressing your query, understanding the return type of the customerDataService methods is essential. Do these methods return a Promise or an Observable? Depending on this, one can employ either Promise.all or the forkJoin operator to await the completion of all methods before executing the select population. Below is an example utilizing observables:

this.webStoreSearchHttpService.GetAllCustomerSalesData(this.customerId).subscribe(response => {
    forkJoin([
        customerDataService.createCustomerList(response),
        customerDataService.createProductAnalysis(response),
        customerDataService.createSalesList(response),
        customerDataService.createYearList(response)
    ]).subscribe(([customerList, productList, salesList, salesYearList]) => {
        this.customerList = customerList;
        this.productList = productList;
        this.salesList = salesList;
        this.salesYearList = salesYearList;
        this.salesYearItemCurrent = _.cloneDeep(this.salesYearList[0]);
    });
});

To optimize and eliminate the nested subscription for better readability:

this.webStoreSearchHttpService.GetAllCustomerSalesData(this.customerId).pipe(
    flatMap(response => 
        forkJoin([
            customerDataService.createCustomerList(response),
            customerDataService.createProductAnalysis(response),
            customerDataService.createSalesList(response),
            customerDataService.createYearList(response)
        ])
    )
).subscribe(([customerList, productList, salesList, salesYearList]) => {
    this.customerList = customerList;
    this.productList = productList;
    this.salesList = salesList;
    this.salesYearList = salesYearList;
    this.salesYearItemCurrent = _.cloneDeep(this.salesYearList[0]);
});

Angular: Verify that all services are fully executed before proceeding to the next step

Answer №1

Similar questions

Angular 11 error: Datatable type is not defined

No location matched any routes

Struggling to create a TypeScript definition file - the JSX element 'SideMenu' lacks any construct or call signatures

Make the current tab the active tab with the help of AngularJS

I'm experimenting with using jQuery toggle to switch between text and images on my webpage

Keycloak does not support using the updateToken() function within an asynchronous function

Following the update, Angular no longer requires any node dependencies

What is the most efficient and hygienic method for storing text content in JavaScript/DOM?

Using assert along with exceptions in code can provide additional error handling capabilities

What are some ways to implement AJAX with input from the user?

The absence of a React JS button on the page

Having trouble setting a background image for a specific DIV element in HTML

Combine several elements in a single jQuery scrollreveal function

Creating a dynamic table based on selected dropdown option

Error: Unable to access _rawValidators property of null object

Streaming RTMP video through a WebView

Unlock the power of jQuery chaining with the val() method

Conditional Rendering with Next.js for Smaller Displays

In Angular, the process of duplicating an array by value within a foreach function is not

What is the best way to send a list of data as either strings or integers through a REST API using Angular's