Is it possible to nest forkJoins within another forkJoin call?

I have implemented a route resolver in this manner, where I want to make two additional HTTP requests based on the initial response from forkjoin. I attempted to nest another forkjoin inside the first one, but I am open to suggestions on better approaches to handle such scenarios. My ultimate goal is to merge both responses into a single unit.

resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
): Observable<any> {
    const userDetails = this._spotify.getCurrentUser();
    const newReleases = this._spotify.getNewReleases();
    const recentPlayedTrack = this._spotify.getUserRecentlyPlayedTracks();
    const resolvedData = forkJoin([
        userDetails,
        newReleases,
        recentPlayedTrack
    ]).pipe(
        map((dashboardApiResults) => {
            const url = `...${dashboardApiResults[1].id}`;
            const options = {
                useUrlPrefix: false
            };
            const req1 = this._http.get(url, options);
            const req2 = this._http.get(url, options);
            const requests = forkJoin([req1, req2]);

            return {
                userDetails: dashboardApiResults[0],
                newReleases: dashboardApiResults[1],
                recentPlayedTracks: dashboardApiResults[2]
            };
        })
    );
    return resolvedData;
}

Answer №1

After reviewing the responses you provided to my inquiries, it appears that utilizing the "of" operator and returning the combined results as an Observable type would be beneficial.

map((dashboardApiResults) => {
     const url = `...${dashboardApiResults[1].id}`;
     const options = {
         useUrlPrefix: false
     };
     const req1 = this._http.get(url, options);
     const req2 = this._http.get(url, options);

     return forkJoin([req1, req2]).pipe(
         concatMap([res1, res2]) => {
             return of({
                userDetails: dashboardApiResults[0],
                newReleases: dashboardApiResults[1],
                recentPlayedTracks: dashboardApiResults[2],
                result1: res1,
                result2: res2
             });
         })
     );
})

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

Errors persist with Angular 2 iFrame despite attempts at sanitization

Attempting to add an iFrame within my Angular 2 application has been challenging due to the error message that keeps popping up. unsafe value used in a resource URL context The goal is to create a dynamic URL to be passed as a parameter into the iFrame ...

Angular reactive forms with Material date picker enables the setting of date in the format of YYYY-MM-DDT00:00:00

I am trying to use Material DatePicker with Moment for date formatting while using reactive forms. Here is the code where I set the value for NextDeliverDate in the .ts file: loadData() { this.getSubscriptionData().subscribe((x) => { this.sub ...

Exploring the world of mocking tests using Jest and inputs

Is there a way to create a jest test specifically for this function? const input = require('prompt-sync')(); export function choices(): void { const choice = input("Choose a letter"); if (choice === "a") { con ...

Angular 12 project with a cutting-edge framework for user interface

Looking to start a new project using Angular 12 and in need of advice on selecting the right UI framework. The options we are considering are Bootstrap 5, Angular Material, and PrimeNG. After conducting some research: Bootstrap 5 is beginner-friendly and ...

Checking for non-falsy variables that include 0 in JavaScript

What is a more graceful method for checking if a variable is truthy but also passes when it's equal to 0? The current verification if(var !== undefined && var !== null) is lengthy and doesn't account for all scenarios such as undefined or ...

Unable to run the command npm run env:restart

Currently, I am in the process of running a basic example. The initial setup involved configuring the convector workspace by installing convector-cli and hurley, as well as performing an npm installation. However, when attempting to execute npm run env:r ...

Once the array has been initialized, I am encountering an issue where it appears as undefined within the "then" block of a promise function

Here is a snippet of my code: Using Typescript: console.log(this.arr); myService.getData(). then(data =>{ console.log(this.arr); this.arr[0].myData = data; }); When I check the logs in Chrome, here's what I see: 1. arr.length=1 - in ...

When I try to reverse the words in a string, I am not receiving the desired order

Currently delving into TypeScript, I have set myself the task of crafting a function that takes in a string parameter and reverses each word within the string. Here is what I aim to achieve with my output: "This is an example!" ==> "sihT ...

The binding element 'params' is assumed to have a type of 'any' by default

I encountered an issue The binding element 'params' implicitly has an 'any' type. Below is the code snippet in question: export default function Page({ params }) { const { slug } = params; return ( <> <h1>{s ...

What is the process for incorporating JavaScript files into an Angular project?

I have a template that works perfectly fine on Visual Studio. However, when I try to use it on my Angular project, I encounter an issue with the JavaScript code. I have filled the app.component.html file with the corresponding HTML code and imported the ...

The exported variable 'SAlert' is utilizing the name 'AlertInterface' from an external module

Utilizing the antd alert component (ts) with styled components import styled from 'styled-components'; import Alert from 'antd/es/alert'; export const SAlert = styled(Alert)` && { margin-bottom: 24px; border-radiu ...

Tips for altering Koa's HTTP status code for undeclared paths

If an undefined route is accessed on a Koa server, what is the best method to change the default HTTP status code and response body? Currently, Koa returns a 404 status and 'Not Found' text in the body. I intend to modify this to 501 (Not implem ...

Creating a new tab with the same html template binding in Angular 4

Could a button be created that, when clicked, opens a new browser tab featuring the same component and variables declared previously? <label>Please Enter Your Email Below</label> <input name="userEmail" type="text" class="form-control" re ...

Using external URLs with added tracking parameters in Ionic 2

I am looking to create a unique http link to an external URL, extracted from my JSON data, within the detail pages of my app. Currently, I have the inappbrowser plugin installed that functions with a static URL directing to apple.com. However, I would lik ...

The alignment of the first and second steps in Intro.js and Intro.js-react is off

There seems to be an issue here. Upon reloading, the initial step and pop-up appear in the upper left corner instead of the center, which is not what I anticipated based on the Intro.js official documentation. https://i.stack.imgur.com/ICiGt.png Further ...

Exploring the Potential of Angular Framework in Combination with Microsoft Analysis

Currently, I am working with SQL Server databases and an Analysis Services layer to access the data. My first attempt was to use Power BI to create a dashboard, but I am not satisfied with how it looks, especially on an iPad, and I find it a bit slow. I ...

Is it possible to modify the CSS produced by Bootstrap in an Angular application?

Just starting out with Angular and Bootstrap I have the following displayed in my browser: Browser Code shown through inspect and this is what I have in my code: <ng-template #newSlaVmData let-modal> <div class="modal-header moda ...

Experience the latest happenings in SAP Spartacus 4.0 by signing up for updates directly from

I am facing an issue while trying to register an event in Spartacus import { Injectable } from '@angular/core'; import { CartDetailsComponent, PromotionService} from '@spartacus/storefront'; import { ActiveCartService, SelectiveCartServ ...

Exporting files to the www folder during Ionic 5 build process

I have a project in progress for developing an application that will cater to multiple companies. Each company would require its own customized app with unique environment variables. To achieve this, I have created "env.js" files specific to each company, ...

Issues arise when attempting to utilize Node.js Socket.io on localhost, as the calls are ineffective in performing logging, emitting, generating errors, or executing any other actions. It has been noted that

I am in the process of developing a real-time socket.io application using Angular and Node, following the instructions provided here. I have set up the server and client connection, but unfortunately, the connection is not being established. Server Code: ...