What is the best way to interpret the data from forkjoin map?

As a newcomer to angular and rxjs, I am seeking guidance on how to properly retrieve data from forkJoin using a map function.

ngOnInit(): void {
    this.serviceData.currentService.subscribe(service =>
        this.serviceFam.getAllFamilles().pipe(
          switchMap(familles =>
            forkJoin(
              familles.map(f => forkJoin(
                this.serviceAffecter.getAffecterServiceFamille(service, f.nom),
                this.serviceOpe.getOperationsServiceFamille(service, f.nom)
                ).pipe(
                map(([listAffecter, listeOperations]) => [f, listAffecter, listeOperations])
                )
              )
            )
          )
        ).pipe(switchMap((data: [Famille, Affecter, Operation][]) => {
          return forkJoin(data.map((f, a, o) => {

            //My goal here is to effectively extract and utilize the retrieved data

          }));
        }))
    );

    this.serviceData.changeAffaire(4);
  }

Answer №1

This code can be a bit messy to navigate, especially when dealing with the switchMap function. However, you have the option to enhance clarity by utilizing the tap operator for logging responses.

forkJoin(
  families.map(f => forkJoin(
    this.serviceAssigner.getAssignedServiceFamily(service, f.name),
    this.serviceOperations.getServiceOperationsByFamily(service, f.name)
  ).pipe(
    tap(res => {
      console.log(res);
    }),
    map(([assignedList, operationsList]) => [f, assignedList, operationsList])
  ))
)

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

The origin of the Angular img src becomes blurred when invoking a function

I want to dynamically change the image src by calling a function that returns the image path. However, when I attempt to do so using the code below, the image element displays as <img src(unknown)/> component.ts: getMedia(row) { this.sharedData ...

Retrieve the current step index in Angular Material Design Stepper

In my endeavors to retrieve the selected step within a component utilizing Angular Material Design stepper, I am encountering some issues. My current approach involves using the selectedIndex property, but it consistently returns "1" instead of the desire ...

Unlike other checkbox components, mat-checkbox does not respond to a false condition unless double-clicked

I am dealing with a situation where an entity has a variable that needs to be the opposite of the checkbox state. enitity.enabled = true The checkbox serves as a way to indicate that an item should be deleted. When the form is submitted, the marked item i ...

What steps should be followed to implement ng-zorro-antd?

I'm currently in the process of developing an Angular project with ng-zorro. I've followed these steps: npm install --location=global @angular/cli ng new ng-zorro-demo This Angular project includes routing. cd ng-zorro-demo/ ng add ng-zorro-antd ...

Challenges with deploying an AngularJS application on a WebSphere Application Server (W

I have been attempting to package my spring boot webservice and Angular 6 app into a war file for deployment on WebSphere Application Server 8.5. I created a sample Angular app and ran "ng build --prod". Following the guidelines provided in this answer, I ...

The compatibility issue between Bootstrap and Angular 2 is causing some challenges

Hey there, I recently enrolled in an Angular 2 course on udemy and everything was running smoothly until I encountered an issue while trying to install bootstrap. I followed the installation steps diligently, but whenever I attempt to add any bootstrap el ...

Importing CSS into the styles section of angular.json is no longer feasible with Angular 6

Currently in the process of migrating a project to Angular 6, I'm facing an issue with importing my CSS file within the styles section of angular.json: "styles": [ "./src/styles.css", "./node_modules/primeng/resources/primeng.min.css", ...

Exploring the Angular lifecycle hooks for directives: AfterContent and AfterView

According to the Angular documentation, it is stated that AfterContent and AfterView lifecycle hooks are intended for components and not directives. Surprisingly, I have a directive that seems to be using them without any issues. What potential limitation ...

Vue 3 with Typescript - encountering a property that does not exist on the specified type error

I'm currently working on populating a component with leads fetched from an API. In my setup, I have a LeadService file and a Vue template file. The challenge I'm encountering is related to using an async call in my template file. Although the cal ...

Creating an SCSS class in a component that is customizable and can

After doing some research and reading various guides and blogs, I am still struggling to find the right solution for this issue. Imagine having the following classes in your main styles.scss file: .btn { padding: 5px; text-transform: uppercase; } .b ...

RxJS: the art of triggering and handling errors

This is more of a syntax question rather than a bug I'm facing. The process is straightforward: Send an HTTP request that returns a boolean value If the boolean is true, proceed If the boolean is false, log a warning and stop the flow. To handle ...

Unable to retrieve a property from a variable with various data types

In my implementation, I have created a versatile type that can be either of another type or an interface, allowing me to utilize it in functions. type Value = string | number interface IUser { name: string, id: string } export type IGlobalUser = Value | IU ...

After integrating React Query into my project, all my content vanishes mysteriously

Currently, I am utilizing TypeScript and React in my project with the goal of fetching data from an API. To achieve this, I decided to incorporate React Query into the mix. import "./App.css"; import Nav from "./components/Navbar"; impo ...

Enabling or disabling a button dynamically in Ionic based on a conditional statement

I am looking to dynamically enable or disable buttons based on specific conditions. The data is retrieved from Firebase, and depending on the data, I will either enable or disable the button. For example, if a user passes the First Quiz, I want to enable ...

Using Angular 2 to efficiently recycle a subcomponent with the same form across multiple parent components while maintaining its state

I've been struggling to find someone with the same issue as me, even though the title may seem familiar. Perhaps I need help rephrasing my question? Here's an explanation: Use case: I have multiple routes (only 2 in the example below) set up fo ...

Validation Form Controls

Here is a piece of code that works for me: this.BridgeForm = this.formBuilder.group({ gateway: ["", [Validators.required, Validators.pattern(this.ipRegex)]], }); However, I would like to provide more detail about the properties: this.BridgeF ...

Creating a loader for a specific component in Angular based on the view

Creating a loader for each component view is crucial when loading data from an API. Here is the current structure of my components within my <app-main></app-main>: <app-banner></app-banner> <app-data></app-data> <app ...

Unclear value of button when being passed

In my Welcome.html file, I am attempting to send the value of a button to a function that simply logs that value. This function is located in a functions class that has been imported into my welcome.ts file. <ion-content padding id="page1"> <h1 ...

Issue with Angular Reactive Forms: Unable to identify control with unspecified name attribute during form submission

Currently, I am working on an Angular project that involves a component responsible for assigning courses to instructors. This specific component utilizes reactive forms, but it has hit a snag related to form controls. The issue arises when the form dynami ...