Is there a way I can ensure that function waits for another function to finish executing?

I am currently working with two functions:

this.initData(resp.Id, "")
this.initSelection(resp.results)

My requirement is for the initSelection function to only fire after the initData function has completed, thus making initSelection function wait for initData to finish.

This is my approach to achieve this:

of(this.initData(resp.results.communityId)).subscribe(()=>this.initCustomerSelection(resp.results))

Unfortunately, the above code is not fulfilling the requirement.

How can I modify it so that the initSelection function waits for the completion of initData?

angulartypescriptrxjs

Answer №1

To handle the values returned by initData and initSelection observables, consider using switchMap

import { switchMap } from 'rxjs/operators';

this.initData(resp.Id, "").pipe(
  switchMap(() => this.initSelection(resp.results),
).subscribe(result => {
  console.log(result);
});

If these functions return promises, you can use await

async fetchData() {
  await this.initData(resp.Id, ""); // wait for this promise to finish before proceeding
  await this.initSelection(resp.results);
}

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

Tips for sequentially arranging and rearranging an array of numbers, even when duplicates are present

Encountered a perplexing issue that has me scratching my head in an attempt to visualize a solution. Currently, I am working with an array of objects that appears as follows: let approvers = [{order:1, dueDate: someDate},{order:2, dueDate: someDate}, ...

javascriptarraysreactjstypescript

Tips for troubleshooting an Angular error when no specific information is provided

I'm encountering an error `ERROR Error: "[object Object]" in my console and my app is displaying a white screen. Everything was working perfectly fine before, and I can't pinpoint any changes that may have caused this issue. The error appears to ...

javascriptangulardebugging

An error occurred with the AuthGuard in the AppModule following a successful login

Upon logging into the Angular app with the ASP.NET Core API app, I encountered the following error message: Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[AuthGuard]: StaticInjectorError(Platform: core)[AuthGuard]: NullI ...

c#angulartypescriptasp.net-core

The term "Movie" is not compatible as a JSX component

Currently working on a movie app project but encountering issues with handling arguments and displaying them properly using TypeScript. The challenge lies in trying to map the movie object, display them individually on the homepage, and showcase all the re ...

reactjstypescriptreact-hooks

Using 2 mat-paginator components to control pagination on a single data source

I have implemented a mat-table that can display up to 100 entries per page. Initially, I had one mat-paginator at the bottom which was functioning correctly. However, I have now been tasked with adding another paginator at the top of the table as well, so ...

angularangular-materialpaginatormat-table

Discover the current routes in Angular

Looking for advice on creating a custom breadcrumb without data ID in the current routes. I have attempted the code below, but it includes the data ID and the routing is not functioning correctly. Seeking expert guidance. Actual link: http://localhost:4 ...

angularroutesbreadcrumbs

The RazorPay callback encountered an Uncaught TypeError indicating that the function is not recognized

In my TypeScript class, I have a defined handler as follows: "handler": function (response) { this.sendUserStatus(); }, Unfortunately, when I attempt to call this.sendUserStatus();, I encounter the following error: Uncaught Typ ...

angulartypescriptrazorpay

Error encountered during production build of Angular 6 Universal with server-side rendering (SSR

I have recently delved into Angular 6 and managed to nearly complete my app. However, I am encountering some struggles with server-side rendering (SSR). Following a tutorial on SSR at this link, I tried running the command npm run build:ssr && npm ...

angularangular-universalserver-side-rendering

What is the best method to trigger a bootstrap modal window from a separate component in Angular 8?

I have successfully implemented a bootstrap modal window that opens on a button click. However, I am now facing difficulty in opening the same modal window from a different component. Below is the code I have tried: <section> <button type=&quo ...

javascriptangulartypescriptbootstrap-4modal-dialog

Struggling to properly import the debounce function in ReactJS when using TypeScript

I am facing an issue while trying to properly import the debounce library into my react + typescript project. Here are the steps I have taken: npm install debounce --save typings install dt~debounce --save --global In my file, I import debounce as: impo ...

reactjstypescript

Difficulty with navigation buttons on multiple Bootstrap carousels implemented using ngFor in a single page

Currently, I'm engaged in developing a practice eCommerce platform where multiple product cards are showcased using data from a sample JSON file. Additionally, several Bootstrap carousels are integrated into the website to display images of each item. ...

htmlangularbootstrap-5

Wildcard routes taking precedence over other defined routes

Currently, I'm developing a Node.js server utilizing Express.js and Typescript. Within my project structure, there is a folder named "routes" where I store .ts files containing route definitions. An example of a route file might appear like this: impo ...

node.jstypescriptexpressroutes

In Typescript, what is a function that can return multiple types separated by commas known as?

As someone who is new to Typescript, I recently came across the following syntax: interface Foo { // what does age signify and // what if it is not optional i.e () => string, age:number; (): () => string, age?: number; } From what I ...

javascripttypescript

What is the process for integrating a tensorflow.js model into a React-based web application?

I've been working on a React web application in Typescript that involves loading a tensorflow.js model and then applying it each time the component updates. While I successfully implemented this in a small demo app without React, I am facing some chal ...

javascriptreactjstypescriptasync-awaittensorflow.js

Using ReactJS with Material UI and applying styles with withStyles including themes in TypeScript

I've been working on converting the Material UI Dashboard into TypeScript. You can find the original code here: Material UI Dashboard One issue I'm encountering is that I am unable to define CSS styles within the withStyles function while export ...

reactjstypescriptmaterial-ui

What is the best way to invoke a TypeScript function within an HTML document?

Can anyone guide me on how to import a TypeScript function into an HTML file and then call it? I'm a bit confused about the process. Below is my attempt in index.html to call the function getJSON() <!DOCTYPE html> <html lang="en"> < ...

htmltypescript

Access exclusive content by subscribing now!

How can I return a reference to a subject from a service without allowing the receiver to call .next() on the subject? Let's say there is a service with a subject that triggers new events. class ExampleService { private exampleSubject = new Subjec ...

javascripttypescriptrxjsobservablesubject

Typescript: Select just one option from the union

There is a specific Query type that contains the getBankAccounts property: export type Query = { getBankAccounts: GetBankAccountsResponseOrUserInputRequest, }; This property can return either a GetAccountsResponse or a UserInputRequest: export type Ge ...

typescript

What steps should I take to resolve the issue with the npm start command?

After setting up a front-end repository and running npm install followed by the npm start command, I encountered the following log file 0 info it worked if it ends with ok 1 verbose cli [ 1 verbose cli 'C:\\Program Files\\nodejs& ...

node.jsangularnpmfrontendnpm-install

The error page is requesting a root-layout, which indicates that having multiple root layouts is not feasible

My issue is as follows: The not-found page located in my app directory requires a root-layout which I have added to the same directory. However, this setup prevents me from using multiple root layouts in the structure below. How can I resolve this? It see ...

javascriptreactjstypescriptnext.jsnext.js13