Call a function within another function of the same class in Angular2, and utilize the properties of the first function in the

I am working on a class that contains two functions, both of which retrieve data from API calls.

Let's start with the First function

getQuotes(){
    this.quoteService.getQuotes()
    .subscribe(
      quotes => {
        this.quotCode = this.quotes.BasicDetails[0].QuotCode;
        }
      });
}

Next, the Second Function

getOption(){
    this.quoteService.getOptions()
    .subscribe(
            options => {
     })
}

I need to extract data from the line in the first function

this.quotCode = this.quotes.BasicDetails[0].QuotCode;

Based on the value of this.quotCode, the getOption() function will need to pass different parameters and receive different responses. It is crucial to utilize this.quotCode in the second function.

I am calling getQuotes() in the constuctor()

If anyone could provide assistance, I would greatly appreciate it. Thank you!

Answer №1

For seamless execution of multiple requests in succession, look no further than RXJS and its mergeMap operator.

this.dataService.getData().mergeMap( data => {
    // Perform necessary operations with the retrieved data
    return this.dataService.getMoreOptions()
}).subscribe( options => {
    // Utilize the additional options obtained
});

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

Running lint-staged on an Angular monorepo

I am facing challenges while setting up lint-staged in my Angular monorepo workspace. Despite multiple attempts, I have been unsuccessful in making it work properly. When the command ng lint --files is executed with a changed file, an error stating that *f ...

Generate a new data structure by pairing keys with corresponding values from an existing

Imagine having a type named Foo type Foo = { a: string; b: number; c: boolean; } Now, I am looking to create a type for an object containing a key and a value of a designated type T. The goal is for the value's type to be automatically determin ...

Issue with Prettier AutoFormatting in a project that combines TypeScript and JavaScript codebases

Recently, I've started incorporating TypeScript into an existing JavaScript project. The project is quite large, so I've decided to transition it to TypeScript gradually. Below is a snippet from my eslintrc.js file: module.exports = { parser: ...

SecurityClient is encountering a problem where the Http Error status is not being displayed

Currently, I am utilizing a custom Http client that is an extension of Angular 4's Http Client. export class SecurityClient extends Http { // ... } Within this client, there are methods designed to make calls to an API and handle a 401 status code by ...

How to Deactivate FormGroup controls in Angular2 Reactive FormModule

In my Angular2 project, I am utilizing the Reactive FormsModule. At this juncture, I am pondering on how to efficiently disable all of the controls within the FormGroup. While the readOnly property can be applied to individual controls, this approach may ...

Utilizing a service within NestJS

I'm currently in the process of updating some older code and I have created a service that I want to inject into the constructor of a class. There are two key points to consider about this particular class. The first point is that it is instantiated b ...

The module 'PublicModule' was declared unexpectedly within the 'AppModule' in the Angular 4 component structure

My goal is to create a simple structure: app --_layout --public-footer ----public-footer.html/ts/css files --public-header ----public-header.html/ts/css files --public-layout ----public-layout.html/ts/css files In public-layout.html, the stru ...

Error: The function setEmail is not defined. (In 'setEmail(input)', 'setEmail' is not recognized) (Cannot utilize hooks with context API)

App.js const[getScreen, showScreen] = useState(false); const[getEmail, setEmail] = useState(""); <LoginScreen/> <LoginContexts.Provider value={{getEmail,setEmail,getScreen,showScreen}}> {showScreen?<Screen2/>:<LoginScre ...

React's memo and/or useCallback functions are not functioning as anticipated

Within my Home Component, there is a state called records, which I utilize to execute a records.map() and display individual RecordItem components within a table. function Home() { const [records, setRecords] = useState<Array<RecordType>>(l ...

When iterating through a table, an error occurs stating that the property "rows" is not available on type HTMLElement (

Issue Error TS2339 - Property 'rows' does not exist on type HTMLElement when looping through table in Angular 7 Encountering error when trying to loop through HTML table in Angular 7 Currently working with Angular 7 and facing an error while ...

summing 3 numbers to a total of 100 percent

I am currently trying to calculate the percentages of different statuses based on 3 count values. Let's assume I have 3 statuses: 1) Passed 2) Failed 3) Skipped When dealing with only two cases, I was able to use a combination of the Floor and Ceil ...

Next.js is refusing to render an array of HTML elements

Consider this scenario where I have a block of code in TypeScript that attempts to create and display a list of elements. Here is a sample implementation: const MenuList = ():ReactElement => { const router = useRouter(), liElements:any = []; con ...

What is the best way to manage optional peer dependency types while releasing a TypeScript package?

I'm trying to figure out the best way to handle optional peer dependencies when publishing a TypeScript package on npm. My package provides a function that can accept input from either one of two peer dependencies. How should I define these optional p ...

Display a free Admob banner within an Ionic 3 application

I have integrated Admob's banner into my Ionic 3 app following the guidelines provided in the Ionic documentation at this link. Below is the code snippet I used for displaying the banner on the homepage: import { Component } from '@angular/core ...

The response of the Typescript Subscription function

I'm struggling with retrieving the subscribe array in NG2. Being new to typescript, I find it difficult to understand how to pass variables between functions and constructors. This is what my code currently looks like: export class RosterPage exten ...

Personalized Authorization AngularFire2 Ionic2

After transitioning my application from Ionic 1 to Ionic 2, I encountered an issue when trying to authenticate with Firebase using AngularFire2. In my original app (Ionic 1), I utilized AngularFire along with custom authentication through Slim Framework. N ...

Avoid using the Input formControlName in the Angular 6 form

Before submitting the form, I want to be able to retrieve the value of the input tag with formControlName. I have tried creating a method to accomplish this, but I am unable to access the current input value. When I removed the formControlName to exclude ...

Troubleshooting issues with exporting Excel in Angular 2

Having trouble exporting data in excel format using JExcelApi lib with an Angular 2 frontend and spring mvc backend? When deploying the backend to Tomcat and making a request via browser, the excel file exports correctly. However, when making the same http ...

"What could be causing my React application to enter a never-ending re-rendering cycle when I incorporate

Currently, I'm working on a code to update the content of a previous post with image URLs received from the server. However, I'm facing issues with excessive re-renders due to my coding approach. Specifically, when converting the image URLs into ...

Upgrading from Angular 2 to 4 causes compilation failure in project

Recently, I upgraded my Angular project from version 2 to version 4. The steps I followed for this upgrade are as follows: 1- Deleted the /node_modules/ folder 2- Executed the following command: npm install @angular/common@latest @angular/compiler@lat ...