The flatMap function is not operating as intended in the sequence of function calls

Having difficulty organizing a chain of calls using TypeScript with RxJS observables

I am new to RXJS and I am struggling to structure a chain of calls in my TypeScript code. My question is - how can I ensure that this.http.get(''); is only called once? Please note that the code provided is just a simplified example for demonstration purposes.

import {Injectable} from '@angular/core';
import {flatMap, map} from 'rxjs/operators';
import {Observable, from} from 'rxjs';
import {HttpClient} from '@angular/common/http';

@Injectable()
export class CoolService {

  constructor(private http: HttpClient) {}
  x(): Observable<Object> {
    return from(Promise.resolve({a: {b: 'c'}})).pipe(
      flatMap((x) => {
        console.log(x);
        return this.http.get('http://www.gooogle.com');
      }), map((res) => {
        console.log(res);
        return res;
      }));
  }
}


Answer №1

My misconception arose from a lack of understanding about how rxjs operators operate individually for each subscription, instead of performing one calculation for all subscriptions simultaneously. This led me to mistakenly chain calls in the service and subscribe to responses in different locations. It turns out that operators execute as many times as there are subscriptions in the code, prompting me to rethink and restructure my approach.

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

NodeJS Jest test failing due to a global variable being set for a different test already

I am currently working on a project in TypeScript using Node.js and Jest. I have a function that may or may not modify a global variable, which is a TypeScript Map. After one test modifies the global variable, it retains that value for subsequent tests. I ...

The module cannot be located due to an error: Package path ./dist/style.css is not being exported from the package

I am facing an issue with importing CSS from a public library built with Vite. When I try to import the CSS using: import 'rd-component/dist/style.css'; I encounter an error during the project build process: ERROR in ./src/page/photo/gen/GenPhot ...

Updating a one-to-one relationship in TypeORM with Node.js and TypeScript can be achieved by following these steps

I am working with two entities, one is called Filter and the other is Dataset. They have a one-to-one relationship. I need help in updating the Filter entity based on Dataset using Repository with promises. The code is written in a file named node.ts. Th ...

Is there a more effective way to implement a Custom Validator using .forEach?

I have developed my own validation class as a learning exercise. Do you think this is an effective approach, or do you have suggestions for improvement? import { AbstractControl } from '@angular/forms'; export class ProjectNameValidator { pr ...

Implementing a builder pattern with @Ngrx/Store

Feeling a bit uncertain... I'm wondering if it's suitable, awesome or not advisable to employ a builder pattern to retrieve API response and then apply the builder pattern on that response before storing it in @ngrx/store? And later on when acces ...

Expanding properties in a React component based on certain conditions using TypeScript

I am attempting to dynamically expand my component props based on whether a specific prop is included. The goal is to add attributes from an anchor if the href prop is provided, and include attributes from a button if it is not. Is this achievable? Chec ...

Error in main.ts due to issues with importing components using an index.ts file

I am facing a common exception: Unexpected directive value 'undefined' on the View of component 'AppComponent' Many solutions I found online did not address my specific issue related to circular dependencies or missing export statem ...

The element 'x' is not found within the 'unknown' type

I've been struggling with this issue. After searching through various sources like stackoverflow and github, I attempted a solution which involved adding a generic but I encountered the error message Expected 0 type arguments, but got 1. in relation t ...

The specified React element type is not valid

Currently working on a web application using Typescript, Electron, Webpack, and NodeJS, but encountering issues with the import/export functionality. The error message that I am facing reads: "Warning: React.createElement: type is invalid -- expect ...

Typescript encounters issues when assigning declaration as TRUE

Currently, I'm working on a project in Angular 2 and attempting to create TypeScript definitions for it so that it can be exported as a library. I have various services set up that make HTTP requests to components, all structured similarly to the cod ...

Attempting to transfer a username String from the client to the server using React and Typescript

I am working on a project where I need to send the username of a logged-in user from the Client to the Server as a string. Currently, I am able to successfully send an image file, but now I also need to send a string along with it. What I aim to do is repl ...

Is there a way to show uppercase values in Angular's tooltip as capital letters?

Here is my HTML code: <i [class]="item.icon" [pTooltip]="item.item" tooltipPosition="bottom" ></i> The value inside item.item is 'ATTACHMENT' and I am unable to modify it from the ts file. Is there a way ...

Duplicate routing configuration causing ngOnInit to be triggered twice

Here is my route setup: { path: 'menu/:level/:parent', component: MenuComponent, pathMatch : 'full' }, { path: 'menu', component: MenuComponent, }, I am trying to make it so that if the URL is menu/2/test, it will use ...

The function onClick in Chart.js allows for passing the selected object in Typescript

In the documentation for Chart.js, I found a reference to an onClick function that is triggered whenever a click event occurs on the chart. The code snippet provided looks like this: options: { onClick: this.Function } Function(event, array){ ... } ...

Angular 6 form input value displays incorrectly after dynamically closing a tab

After adding a child-component with a form inside a tab, I noticed that when I closed the tab, the child-component form value was changed to the deleted tab. However, the span value remained correct. It's quite strange - could this be a bug? Check ou ...

The TypeScript optional callback parameter is not compatible with the anonymous function being passed to it

Encountering an issue with TS callbacks and function signatures. Here is my scenario: ... //inside a class //function should accept a callback function as parameter refreshConnection(callback?: Function) { //do something //then ca ...

Angular: implementing lazy loading module specifically for development environment (environment.production === false)

I have a lazy loaded module specifically for development purposes and I do not want to include it in the production build. To prevent activation and loading, I have implemented a guard: const routes: Routes = [ { path: 'dev', loadChil ...

Best practices for utilizing ngrx/store in Angular 2

As I am refactoring my Angular 2 applications to follow the ngrx pattern, some questions have arisen in my mind: My application retrieves a list of apps and a list of app categories. Can I manage state like "selectedCategory" (where only one can be select ...

An issue has been detected by Zone.js where the ZoneAwarePromise `(window|global).Promise` has been unexpectedly replaced

I have recently integrated the Angular2 quickstart code into my existing webpack setup, but I seem to be facing an issue where something is interfering with the promise from zone.js, resulting in an error. Based on my research on Stack Overflow, it appears ...

Angular 2 now has the ability to detect keydown events triggered from any part of the page

Is there a way to enable keyboard control for a view? I attempted using document.keydown, but it wasn't successful. How can I make the document accept keyboard input? A solution that worked for me was implementing this in my component class: @HostLi ...