unspecified result returned for function parameter with no assigned value

There are two functions at play here. The first function returns a result stored in a variable, which is then passed as a parameter to the second function to call a service. The issue is that when these functions are invoked within ngOnInit, the second function is unable to capture the result stored in the variable from the first function. Is there a way to overcome this problem?

TS code:


udata:string;

ngOninit(){
    this.f1();
    this.f2();
}

f1(){
    this.service.getudata().subscribe(res => {
        this.udata = res;
    });
}

f2(){
    this.service.getudatas(this.udata).subscribe(res => {
        const data = res;
    });
}

Answer №1

To optimize your code, consider implementing a RXJS chaining solution using flatMap. Here is an example:

ngOninit(){
    this.loadData().pipe(
    flatMap( x => this.fetchData(x)))
    .subscribe(res => const data = res);
}

loadData(){
    return this.dataService.getUserData();
}

fetchData(userData){
   return this.dataService.fetchUserData(userData);
}

Answer №2

It seems that f2() is being invoked prior to the completion of your subscription in f1(). To resolve this issue, you can ensure that this.f2() is called from within the subscription response.

f1(){
 this.service.getudata().subscribe(res =>{
  this.udata = res;
  this.f2();
 });
}

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

What are the reasons behind the compilation failure of the react-sortable-hoc basic example when using typescript?

Take a look at this sample code snippet extracted from the official react-sortable-hoc webpage. import React, {Component} from 'react'; ... // Code snippet goes here ... render(<SortableComponent/& ...

Using Angular 2 to trigger an event when a native DOM element is loaded

I am working towards my main objective of having a textarea element automatically focused upon creation. I recently came up with an idea to use e.target.focus() on the onload event. It would look something like this: <textarea rows="8" col="60" (load)= ...

Angular 5 - Deleting DOM Elements Causes View to Remain Stale

I am experiencing an issue with a tag type search functionality on my website. The search has two columns in the view, with the right column for categories and the left for subcategories. When a user clicks on a category tag, I use buttons to display a sel ...

Steps to retrieve the search box input value and submit it in an AngularJs component using the Enter key

I'm facing an issue where I am trying to fetch the search list using speciesName from a table. However, when I attempt to retrieve the data by pressing the enter key, it is returning an error stating that the input data is undefined. Is there a way ...

What could be triggering the "slice is not defined" error in this TypeScript and Vue 3 application?

I have been developing a Single Page Application using Vue 3, TypeScript, and the The Movie Database (TMDB) API. In my src\components\MovieDetails.vue file, I have implemented the following: <template> <div class="row"> ...

Leveraging TypeScript global variables in SharePoint operations

In TypeScript and Angular, I've developed a function called getTasks() that should run when a modal is closed. Here's the code for the function: getTasks() { this.http.get(`https://example.com/_api/web/lists/getbytitle('Tasks')/items` ...

Setting up Angular integration with ASP.NET Core on Azure App Service

Currently, I am working on a web application that combines Angular and .NET 5, and my goal is to host it on two separate Azure App Service instances - one for testing and the other for production environments. To achieve this setup, I have referred to the ...

The integration of ngx-translate with an HTTP interceptor is currently experiencing difficulties

Using ngxtranslate for application translation has been seamless so far. However, I am facing an issue with the HttpInterceptor. This interceptor attempts to retrieve data from local storage at the start and displays a dialog prompting you to either load t ...

Effortlessly control your CSS within extensive Angular 2/4/5 projects

When working in Angular, I typically organize my CSS on a component basis with some global styling in styles.css. However, I'm looking for a better way to easily update CSS in the future. I want to be able to make changes in one place and see them ref ...

When inputting data from an Angular 6 form into Mongoose, the stored date appears to be offset by

I am currently working with Angular 6 to store form data, specifically a date. The form is sending the date as (date: "2018-07-02T00:00:00.000Z") and that's what gets saved into mongoose. However, when I retrieve all events to display on the page, the ...

The tooltip is being truncated

https://i.sstatic.net/o41Qz.png Struggling with a tooltip that keeps getting cut off? I've tried everything and still can't get it right. <th class="fd-table--header-cell" scope="col"> <p class=&q ...

Handling JSON Objects with Next.js and TypeScript

Currently, I am working on a personal project using Next.js and Typescript. Within the hello.ts file that is included with the app by default, I have added a JSON file. However, I am facing difficulties in mapping the JSON data and rendering its content. T ...

Exploring the functionality of the Aria role attribute within Angular 2

It's strange that the ARIA role attribute doesn't seem to be functioning as expected for me in Angular 2. I attempted to assign a div role of "listbox" and set the children as role "option", but it still doesn't work. Could someone assist m ...

Animating targeted elements in Angular 2

I am working with 2 components: The first component contains a router-outlet where pages with a question and 3 possible answers are injected. The second component is a preview that consists of 20 boxes. I utilize a shared service (BehaviorSubject) fo ...

Utilizing shared components across a Next.js application within a monorepo

Utilizing a monorepo to share types, DTOs, and other isomorphic app components from backend services (Nest.js) within the same mono repo has presented some challenges for me. In my setup, both the next.js app and nest.js app (which itself is a nest.js mono ...

Is the indigo-pink color scheme fully implemented after installing @angular/material and scss using ng add command?

After running ng add @angular/material, we are prompted to choose a CSS framework and theme. I opted for indigo-pink and scss. Will the material components automatically inherit this theme, or do we need to take additional steps? When using normal CSS (wi ...

Angular: Handling route segment configuration based on the URL

Consider a situation where you have a URL like /path/path2/path3/123;sdf=df and a predefined routes configuration: { path: 'path', data: { g: 'h' }, children: [ { path: 'path2', data: { c: 'd' }, children: [ { ...

Encountering an issue when retrieving the value from a template-driven Angular form

Encountering an issue in the register function regarding storing the form control value. When using "let firstname", "let lastname", and "let email", I am receiving the error [tslint] Identifier 'firstName' is never reassigned; use 'const&a ...

Creating Typescript libraries with bidirectional peer dependencies: A complete guide

One of my libraries is responsible for handling requests, while the other takes care of logging. Both libraries need configuration input from the client, and they are always used together. The request library makes calls to the logging library in various ...

Setting the isLogged variable for other components in Angular 2 can be accomplished by using a shared

I am using a principalService to retrieve the current authenticated user from the backend server, and authService.ts includes a local variable 'isLogged:boolean'. Goal: I need to access the value of 'isLogged' from authService in Navba ...