Working with RxJS: Implementing cascading calls for an array of dependent operations

In my current scenario, I am faced with the task of sending multiple calls using both GET and DELETE methods followed by a final call.

To elaborate, I have an array of objects that need to be inserted (array2insert) using a http POST request, another array of objects that should be deleted using a http DELETE request (array2delete), and finally a http GET call needs to be made.

I attempted the following approach but it did not yield the desired results:

forkJoin(
  from(array2insert).mergeMap(),
  from(array2insert).mergeMap()
).pipe(lastGetCall)

Answer №1

It seems like you are looking for a code snippet similar to the one provided below, although I have not tested it myself:

 forkJoin([
    from(dataToInsert).pipe(
      concatMap(item => this.httpClient.post(`/api/foo`, item))
    ),
    from(dataToDelete).pipe(
      concatMap(item => this.httpClient.delete(`/api/foo/${item.id}`)
    ),
    this.httpClient.get(`/api/bar`)
  ])

Answer №2

Great job, you are definitely headed in the right direction. Just remember to subscribe during testing to ensure you see the desired output.

I experimented with the code below and it appears to fulfill your requirements:

const run = number =>
    of(number).pipe(
        tap(() => console.log("Running operation: ", number)),
        delay(100)
    );

forkJoin(
    from([1, 2, 3]).pipe(mergeMap(run)),
    from([4, 5, 6]).pipe(mergeMap(run))
)
    .pipe(mergeMap(() => run("executeGet")))
    .subscribe(() => {});

The main change here is the utilization of mergeMap after forkJoin in the pipe sequence.

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

How can I apply concatMap in Angular?

Can you please guide me on how to effectively utilize concatMap with getPrices() and getDetails()? export class HistoricalPricesComponent implements OnInit, OnDestroy { private unsubscribe$ = new Subject < void > (); infoTitle ...

How to retrieve the current route name or URL in AngularDart5

Exploring the OnActivate feature in Angular docs, I am attempting to utilize it to dynamically update the UI based on the current route. @Component( selector: "blah", template: """blah""", directives: const [routerDirectives]) class Blah ext ...

Angular 2: Capturing scroll events from the parent element within a Directive

One of the challenges I encountered is with a directive called [appInvalidField] that functions like a custom tooltip for validation purposes. To ensure it appears above everything else within dialogs, I attach it to the body and position it near the relev ...

Checkbox click registers two instances

I made sure to cover all the details in the demo video. Check out the sandbox here: https://codesandbox.io/s/github/b1gun0v/reactjs-typescript-vladilen-minin Watch the demo video here: https://www.youtube.com/watch?v=xt032rjyXsU ...

Tips for incorporating nonce or sha into the connect-src directive in Content Security Policy (CSP)

Can a nonce be used in an API request to make sure that the connect-src in CSP doesn't flag it as a malicious address? It appears that nonce can only be used in script-src or style-src, not in connect-src. So far, I have only been able to list URLs ...

Steps for hosting Angular on Firebase:1. Set up a Firebase project

I am having trouble getting my Angular app to display properly on Firebase after deployment. Instead of showing my app, it is displaying the default index.html generated by Firebase. How can I fix this? This is what my firebase.json file looks like: { ...

Performance problems with Ionic ion-slides due to excessive method calls

Encountering an issue with the ion-slides component where a method within my ion-slide is being called excessively, causing significant slowdown. Surprisingly, the method is triggered 900 times initially (despite showing only 100 slides) and each slight sw ...

Leveraging @Inputs with Angular 2's <router-outlet> component for optimal functionality

I am working on a webpage with a sub-navigation feature that displays subviews below a main view. I am looking for a way to pass an object to the subviews using the <router-outlet> so that I only need to retrieve the data once in the main component a ...

TypeScript: Defining an Array Type within a Namespace or Module

Within a specific namespace, I have the following code: const operation1 = Symbol("operation1"); const operation2 = Symbol("operation2"); export interface Array<T> extends IConjable<T>, ISeqable<T> {} Array.prototype[op ...

Error NG8002: Unable to associate with 'style' as it is not a recognized attribute of 'ngx-skeleton-loader'

We recently integrated the package "ngx-skeleton-loader" version 8.0.0 into our Angular v15 application. However, we are unable to upgrade to the latest version of the package due to the requirement of updating Angular to v17. According to the documentati ...

A guide on integrating an Angular component into a Node Express environment

When I send a GET request to this URL: http://localhost:5029/article/16 I check for article/16 within Node using: req.url.split("article/")[1]; and then try to render the component using handlebars like so: res.render('header', {layout: &apos ...

When you click on one checkbox, the angular2-multiselect dropdown automatically selects all the boxes

<angular2-multiselect [data]="sortedDataList | OrderBy : 'clientName'" [(ngModel)]="selectedItem[sortedDataList.clientId]" [settings]="dropdownSettings" name="multiSelect" (onSelect)="onItemSelect($event, ...

Angular 13 throws NG0301 error message, failing to display the problematic module

Can someone provide assistance? Recently, I upgraded my Angular project from version 11 to version 13: Angular: 13.2.4 ... animations, cdk, common, compiler, compiler-cli, core, forms ... platform-browser, platform-browser-dynamic, router Package ...

Visibility issue with directive in shared module

Exploring the world of Angular 2 after having some hands-on experience with Angular 1 and encountering a few challenges. I've created a shared module: import { NgModule } from '@angular/core'; import { CommonModule } from &apos ...

Tips for deploying an Angular 2+ application on the OpenShift platform

I successfully developed an Angular application on my Windows PC, and now I am facing challenges in deploying it on Red Hat OpenShift. Despite searching for guides online, I have not been able to find helpful resources. If anyone has experience with deploy ...

Retrieving the Final Value from an Observable in Angular 8

Is there a way to retrieve the most recent value from an Observable in Angular 8? let test = new BehaviorSubject<any>(''); test.next(this.AddressObservable); let lastValue = test.subscribe(data=>console.log(data.value)); Despite my ef ...

Error: JSON parsing error caused by an unexpected character '<' at the start of the JSON data while executing an Angular post request to a

Using Angular 2, I have been attempting to send data from my Angular application through a POST request to a PHP file on the server. However, I keep encountering an error that reads "SyntaxError: Unexpected token < in JSON at position 0". Below is the c ...

Tips for accessing properties in JSON objects using AngularJS

In my Angular project, I have a TypeScript class called CheckoutInfo. export class CheckoutInfo { lines: CheckoutInfoLine[]; taxRate: number; get subTotal(): number { return this.lines.reduce((acc: number, cur: CheckoutInfoLine) => ...

Refining strings to enum keys in TypeScript

Is there a method to refine a string to match an enum key in TypeScript without needing to re-cast it? enum SupportedShapes { circle = 'circle', triangle = 'triangle', square = 'square', } declare const square: string; ...

What is the best way to manage the 'content' attribute in TSX?

I'm currently developing an application that utilizes schema.org. In the code snippet below, you can see how I've implemented it: <span itemProp="priceCurrency" content="EUR">€</span> According to schema.org do ...