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

Is it possible to load components lazily without lazy loading modules in Angular?

Lazy loading is a widely used strategy, especially in Angular where it typically applies at the module level. However, can components be lazily loaded as well? Most web tutorials explain how lazy loading works with modules, such as having a main module in ...

Preventing image flickering in SvelteKit: A guide

Upon the initial loading of a website, you may notice that the images tend to flicker or flash when transitioning between them. However, once these images are stored in the browser's cache, subsequent visits to the site will display the images seamles ...

Spring Boot - The Cross-Origin Resource Sharing filter is effective for handling GET requests, however it does not properly handle other

In my current project, I am working on a Spring Boot 2.2.5 application paired with an Angular 9 frontend. One of the challenges I have faced is configuring a CORS filter in the Spring Boot backend to allow any origin, headers, and requests. After thoroug ...

I'm facing an issue in Angular 4 where the routing for a child component is

I'm currently working on implementing routing in my Angular app for movies. I've set up a movie component and an edit movie component. The edit movie component is nested within the movie component, as shown in the folder structure below: https: ...

The TypeScript error ts2322 occurs when using a generic constraint that involves keyof T and a

Trying to create a generic class that holds a pair of special pointers to keys of a generic type. Check out an example in this playground demo. const _idKey = Symbol('_idKey') const _sortKey = Symbol('_sortKey') export interface BaseSt ...

Tips for utilizing the latest hook feature in Typegoose

After adding a pre hook on updateOne events, I noticed it functions differently compared to save events... I believe this discrepancy is due to the fact that the update command typically includes a matcher as its first argument. I attempted to capture the ...

Having trouble importing a file in TypeScript?

I needed to utilize a typescript function from another file, but I encountered an issue: I created a file called Module.ts with the following code snippet: export function CustomDirective(): ng.IDirective { var directive: ng.IDirective = <ng.IDire ...

Angular2 material dropdown menu

Currently, I am studying angular2 with its material design. One of the modules I am using is md-select for material and here is a snippet of my code: <md-select> <md-option value="1">1</md-option> <md-option value="2">2< ...

The test() function in JavaScript alters the output value

I created a simple form validation, and I encountered an issue where the test() method returns true when called initially and false upon subsequent calls without changing the input value. This pattern repeats with alternating true and false results. The H ...

What steps can I take to concentrate on a particular mat-tab?

<mat-tab-group mat-stretch-tabs #tabGroup (focusChange)="tabChanged($event)" [selectedIndex]="0"> <mat-tab label="DATOS EXPEDIENTE"> <div class="example-large-box mat-elevation-z4"> <app-informe-expediente></app ...

Unable to reduce zone.js version in Angular

I'm facing an issue trying to downgrade my zone.js file from version 0.8.10 to 0.8.5 in order to address app problems on older devices like Huawei with Android 5.1.1. Steps I've followed: npm install <a href="/cdn-cgi/l/email-protection" cla ...

Issues with Angular route links not functioning correctly when using an Array of objects

After hard coding some routerLinks into my application and witnessing smooth functionality, I decided to explore a different approach: View: <ul class="list navbar-nav"></ul> Ts.file public links = [ { name: "Home&quo ...

What is the reason behind Rollup flagging code-splitting issues even though I am not implementing code-splitting?

In my rollup.config.js file, I have only one output entry defined as follows: export default { input: './src/Index.tsx', output: { dir: './myBundle/bundle', format: 'iife', sourcemap: true, }, plugins: [ ...

In TypeScript, the first element of an array can be inferred based on the second element

Let's consider a scenario where we have a variable arr, which can be of type [number, 'number'] or [null, 'null']. Can we determine the type of arr[0] based on the value of arr[1]? The challenge here is that traditional function ov ...

Tips for organizing your CSS from scratch without relying on a pre-existing framework such as bootstrap, bulma, or materialize

As I embark on a new Angular project, the decision has been made to create our own component library instead of using frameworks like Bootstrap, Bulma, or Materialize. Despite some initial research, I'm feeling a bit lost on where to begin (other than ...

Simplifying parameter types for error handling in app.use callback with Express.js and TypeScript

With some familiarity with TypeScript but a newcomer to Express.js, I aim to develop a generic error handler for my Express.js app built in TypeScript. The code snippet below is functional in JavaScript: // catch 404 and forward to error handler app.use((r ...

Issue with ngModel value not being accurately represented by checkbox state in Angular 2

My issue lies with a checkbox that does not reflect its ngModel value. To provide some context, I have a Service managing a list of products and a component responsible for displaying this list and allowing users to select or deselect products. If a user d ...

Implementing optional default values in React props using conditional types

I have a dilemma with conditional props types When attempting to set a default value for my optional prop within the conditional type, it causes issues with the types export type ChatBase = { id: string; title: string; } type ChatCardProps = { title: ...

Troubleshooting Angular 2 Final Release Visual Studio - encountering issues with finding module name and incorrect module.id path leading to 404 errors

After upgrading to the Angular 2 Final Release (I am using Visual Studio 2015 and TypeScript 1.8), I noticed that my line moduleId: module.id in my components now has a red squiggly underline and displays an error saying cannot find name 'module' ...

"Exploring Angular: A guide to scrolling to the bottom of a page with

I am trying to implement a scroll function that goes all the way to the bottom of a specific section within a div. I have attempted using scrollIntoView, but it only scrolls halfway down the page instead of to the designated section. .ts file @ViewChild(" ...