The error message "Undefined error in Angular 8 when waiting for API call to finish" appears when

 if(this.datashare.selectedtableId!=null) {
     console.log( "inside if condition");
     let resp= this.http.get(this.global.apiUrl+"columns/"+this.datashare.selectedtableId);
     resp.subscribe((data)=>this.users=data);
     console.log(this.users);
     this.count=this.users.length;
  }

When I check the console, it displays all the API data as expected (console.log(data)). However, when I try to retrieve and store the data in a local variable at the beginning of my component, it returns undefined.

Answer №1

Set the value for a variable within the subscribe function.

When you subscribe to an Observable, the current thread does not stop until it receives a response from the subscription. It simply moves to the next line and continues execution.

Consider implementing the following changes:

...

resp.subscribe((data)=>{
    this.users = data;
    console.log(this.users);       //   --> check response data here 
    this.count = this.users.length;
});

console.log(this.users);           //  --> will output undefined 
...

Happy Coding :)

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

Steps for implementing an onclick action in Angular 4 from infowindow content

Currently, I am integrating Google Maps into an Angular 4 project and I need to implement a click event inside the infowindow. How can I achieve this? I attempted the following code but encountered an issue where the name is undefined. Even though I called ...

Using NavController.setRoot within a resolved Promise in an Ionic 2 application

I am currently facing an issue with navigating to another page after a successful login while using the JS Library with Parse Server. When I try to use this.navCtrl.setRoot(TemplatesPage);, it doesn't seem to have any effect in my application. After ...

Ways to adjust the color dynamics of a mat-slider

I am looking to dynamically change the color of a mat-slider. In my app, users have the ability to select any color from a color palette, and I want to display that selected color as the slider color. While I know you can add custom color names in the col ...

Implementing routerLinkActive for the same link in multiple sections in Angular

I am facing an issue with the routerLinkActive class in my application. I have two sections, one for pinned tools and one for all tools. Both sections have the same routerLink defined. The problem is that when I click on a link in the pinned tools section, ...

Guide to employing Axios types in project declaration files

When working on my project's type declaration file, I encountered a dilemma with using Axios types as part of my own types. The issue lies in the fact that all declarations for Axios are exported from their official repository. I specifically need to ...

Having trouble retrieving data in the service. Unable to subscribe to it from other components

userService.ts private APIUrl: string = environment.APIUrl; constructor(private inService: API, private httpClient: HttpClient) { } private _userDataDashboard$ = new ReplaySubject<UserDetailsDashboard>(1); getUserDetailsSubject(): Obser ...

Storing information using the DateRangePicker feature from rsuite - a step-by-step guide

Currently, I am working on storing a date range into an array using DateRangePicker from rsuite. Although my application is functioning correctly, I am encountering some TypeScript errors. How can I resolve this issue? import { DateRangePicker } from " ...

Changing the selection on multiple input fields in Angular

I am working with two select elements in my form. Based on the selected value from the first select, I am filtering data for the second select. Additionally, I have an option to add the same row of form if desired. My issue is that when I select a value fr ...

When executing the "node app.js" command, the <app-root> element appears empty in the browser

After creating an Angular 7 application with the Angular CLI and adding my express server, I encountered a strange issue. When starting my app with the command "node server/app.js", the browser displayed <app-root></app-root> in the "Elements" ...

Display text when hovered over or clicked to insert into an HTML table

I have an HTML table connected with a component field gameArray and I need it to: Show 'H' when the user's cursor hovers over TD (:hover) and the corresponding field in gameArray is an empty string, Fill the gameArray field after a click. ...

Initial 16 characters of the deciphered message are nonsensical

In a specific scenario, I encounter data encryption from the API followed by decryption in TypeScript. I have utilized CryptoJS for decryption in TypeScript. Below is the decryption code snippet: decrypt(source: string, iv: string): string { var key = envi ...

Update the color of the label on the ng2-charts/charts.js pie chart

I am currently using ng2-charts and have successfully created a beautiful pie-chart with labels and data. However, I am unable to change the default grey color of the labels. Is this normal? How can I override the default label color? It appears that the ...

Is there a solution for onBlur() event in Angular 7's ngx-intl-tel-input?

I encountered a problem in Angular 7 while working with the ngx-intl-tel-input package. I am trying to validate a phone number on blur event. <ngx-intl-tel-input [cssClass]="'form-control'" [preferredCountries]="preferredCountries" ...

Angular 7 ERROR: The SystemJS reference is missing

In the process of developing an Angular 7 project with systemjs for dynamic module loading, I encountered an issue. Upon attempting to utilize it, I encountered the following error: ERROR ReferenceError: SystemJS is not defined Within my package.json f ...

Should the null-forgiving operator be avoided when using `useRef`?

Is the following code snippet considered poor practice? const Component: React.FC<{}> = () => { const ref = React.useRef<HTMLDivElement>(null!); return <div ref={ref} />; } I'm specifically questioning the utilization of ...

Adjust property value based on changes in a related property

Currently, I am developing a TypeScript-powered Angular (5) application and I have encountered a puzzling question that is proving elusive to solve. Let me illustrate with the following example: ... export class SomeComponent implements onInit { ... ...

I'm baffled by how the community response is implemented in this particular TypeScript exercise on Exercism

I am currently learning TypeScript from scratch by working on exercises available on exercism Successfully completed the 5th exercise on Pangram. Below is my solution: class Pangram { alphabet = "abcdefghijklmnopqrstuvwxyz" constructor(privat ...

The element is implicitly assigned an 'any' type as the expression of type 'string' is unable to be used as an index within the type '{...}'

Trying to improve my react app with TypeScript, but encountering issues when typing certain variables. Here's the error message I'm facing: TypeScript error in /Users/SignUpFields.tsx(66,9): Element implicitly has an 'any' type becaus ...

"Discover the step-by-step process of building a vue.js3 application with typescript, vue-router, and vuex without relying on

I have been assigned the task of developing a Vue3 application with TypeScript support using Vuex for state management and vue-router for basic routing. However, I am not allowed to use vue-cli for this project. Here is my current code: <head> & ...

Challenges encountered while using TypeScript to implement the CSS breakpoint mixin

I attempted to replicate the breakpoint mixin functionality described at using TypeScript, but I am having trouble correctly typing the function. import { css } from 'styled-components'; import { breakpoints } from './_variables'; exp ...