Could someone please explain why the function getTasks() is showing up as undefined?

Question

Could someone please explain why the function getTasks() is showing up as undefined?

After successfully retrieving tasks from the API and confirming that the data is accurate, I encountered an issue when trying to log it in the console as it returned undefined.

Below is my code:

tasksEvents: Task[];


getTasks() {
    this._taskService.getTasks()
    .subscribe(
        res => { this.tasksEvents = res },
        err => console.error(err)
    )
}

ngOnInit(): void {
    this.getTasks();
    console.log(this.getTasks(); <------ Undefined
}

Although the data retrieval is working fine, I am looking for ways to further utilize the getTasks() function.

Here is the relevant snippet from task.service.ts:

taskUrl = 'http://127.0.0.1:8000/api/tasks';

getTasks() {
    return this._http.get<Task[]>(this.taskUrl);
}

angular typescript rxjs

Answer 1

Answer №1

When using an asynchronous function like <code>getTasks()

, you must implement mechanisms such as subscribe() or other RxJS operators like tap/do to access the emitted values. To improve your code, adjust getTasks() to return an observable (eliminate subscribe()) and utilize subscribe() in ngOnInit() to assign the value to the class property and log it if necessary:

tasksEvents: Task[];

getTasks() {
  return this._taskService.getTasks();
}

ngOnInit(): void {
  this.getTasks().subscribe(res => {
    this.tasksEvents = res;
    console.log(res);
    console.log(this.tasksEvents);
  });
}

This modification should provide clarity!

Answer 2

When using an asynchronous function like <code>getTasks()

, you must implement mechanisms such as subscribe() or other RxJS operators like tap/do to access the emitted values. To improve your code, adjust getTasks() to return an observable (eliminate subscribe()) and utilize subscribe() in ngOnInit() to assign the value to the class property and log it if necessary:

tasksEvents: Task[];

getTasks() {
  return this._taskService.getTasks();
}

ngOnInit(): void {
  this.getTasks().subscribe(res => {
    this.tasksEvents = res;
    console.log(res);
    console.log(this.tasksEvents);
  });
}

This modification should provide clarity!

Could someone please explain why the function getTasks() is showing up as undefined?

Answer №1

Similar questions

Error message stating that NgxMatDatepickerBase provider is not found in ngx-mat-datepicker

Ways to alter the color of individual pseudo elements using a CSS loop

Containerizing Next.js with TypeScript

Utilizing Array Notation in Typescript to Retrieve Elements from Class

What is the best way for the frontend to access the information of the user currently logged in?

Can an Ionic Angular app utilize multiple web workers simultaneously?

Even with the presence of FormsModule, ngModel is still unrecognized as a property

A button created in SVG dynamically adjusts its position when the highcharts are resized

Listening to events on the iterative variable of NgFor directive in Angular 2

Pass a React component as a required prop in Typescript when certain props are necessary

Troubleshooting problem with iPhone X responsiveness

Using Angular to display the initially selected option value in a select dropdown menu

What is the best way to create a new instance for each incoming HTTP request in NestJS?

What is the reason behind Collection.bulkwrite() only writing a single document to the MongoDB database?

Steps to Turn Off TSLint Alert for Dep Import Concerns

Is there a way to utilize Typescript enum types for conditional type checking?

Finding comfort through NodeJS without relying on immediate success

Steps for injecting a @liaoliaots/nestjs-redis redis connection into a global guard constructor

Creating a way for a Google Maps overlay to refresh independently without affecting the rest of the page

Dayjs is failing to retrieve the current system time