Retrieving data for a route resolver involves sending HTTP requests, where the outcome of the second request is contingent upon the response from the first request

Question

Retrieving data for a route resolver involves sending HTTP requests, where the outcome of the second request is contingent upon the response from the first request

In my routing module, I have a resolver implemented like this:

{
    path: 'path1',
    component: FirstComponent,
    resolve: {
     allOrders: DataResolver
    }

}

Within the resolve function of DataResolver, the following logic exists:

resolve(): Observable<Array<string>> {

    return this.serviceA.getAllfooNames()
    .map(result=> {

         /* result is an array of strings*/
         return this.serviceB.getAllBarNames(result[0])

         /*orders is also supposed to be an array of strings*/     
          .map(orders=> return orders)                        
    });

 }
}

I am seeking help on how to store the value of orders under the key allOrders. Additionally, I need guidance on passing the orders array as data in the ActivatedRoute snapshot. Any assistance would be greatly appreciated.

javascript angular typescript angular-resolver angular-activatedroute

Answer 1

Answer №1

If you want to combine concatMap and zip, here is how you can do it:

resolve(): Observable<Array<string>> {
  return this.serviceA.getAllfooNames().pipe(
    concatMap((names) => 
      zip(...names.map((name) => this.serviceB.getAllBarNames(name)))
    ),
    map((...names) => 
      names.reduce((acc, curr) => acc.concat(curr), [])
    ) 
  ); 
}

This code snippet will give you all the strings returned from the serviceB call in a single array of strings.

In simple terms, you first call getAllfooNames. With concatMap, you wait for this request to finish, which returns multiple names as strings. Then, using the zip operator, you combine and execute all these observables passed through the array map method and emit once they are all completed.

Finally, the map function receives multiple string arrays as arguments. By utilizing reduce, you transform them into one large array.

Answer 2

If you want to combine concatMap and zip, here is how you can do it:

resolve(): Observable<Array<string>> {
  return this.serviceA.getAllfooNames().pipe(
    concatMap((names) => 
      zip(...names.map((name) => this.serviceB.getAllBarNames(name)))
    ),
    map((...names) => 
      names.reduce((acc, curr) => acc.concat(curr), [])
    ) 
  ); 
}

This code snippet will give you all the strings returned from the serviceB call in a single array of strings.

In simple terms, you first call getAllfooNames. With concatMap, you wait for this request to finish, which returns multiple names as strings. Then, using the zip operator, you combine and execute all these observables passed through the array map method and emit once they are all completed.

Finally, the map function receives multiple string arrays as arguments. By utilizing reduce, you transform them into one large array.

Retrieving data for a route resolver involves sending HTTP requests, where the outcome of the second request is contingent upon the response from the first request

Answer №1

Similar questions

Creating a TypeScript definition file to allow instantiation of a module

Exploring the process of assigning custom images to individual items within arrays in React JS

Using the application router in Next.js to implement getServerSideProps()

Creating a polyBezier or polyCurve with Canvas HTML: a step-by-step guide

What is the best way to generate a random item when a button is clicked?

Is it possible to conceal a table element using [hidden] in Angular 2?

Dealing with multiple parameters within the app.param() function

Unleashing the full potential of Azure DevOps custom Tasks in VS Code and TypeScript: A guide to configuring input variables

There seems to be an issue with the Typescript version compatibility in the node_modules folder for the Angular Material table cell component

Guide on how to automatically direct users to a page upon successful login in ReactJS

Exploring the Battery Manager functionality within AngularJS

Could someone assist me with understanding how to use the Load function in JQuery?

How can we utilize a loop to continuously sum up numbers until we reach a multiple of another number, let's say when the total is divisible by 4?

Retrieve the HTML code from a webpage on a different domain

Troubleshooting issue with React mapping an array of items in a modal window

Automated tasks running on Firebase Cloud Functions with cron scheduling

Angular's route resolve feature does not wait for the promise to resolve before

What is the best way to calculate the total sum of a column in Vue JS?

Update the variable obtained from the user input and insert it into a new container depending on the input value

Error: Unable to access the currentTime property as it is not defined