Angular 7 Service Returns Undefined from restful API

Question

I'm trying to return a list of tasks from and Angular service that gets the data from a restful .NET API. The API returns the proper data, but when console.log the result from the subscribed to function it is only undefined. Please help!

Here is the API method that is functioning correctly: TaskController.cs

[HttpGet, Route("")]
    public IEnumerable<GetAllTasksAndInfoDto> GetAll()
    {
        IEnumerable<GetAllTasksAndInfoDto> tasks = _taskRepository.GetAllTasksAndInfo();
        return tasks;
    }

I have two services on called task.service.ts and one called email-notification.service.ts. Task is to return all the tasks in a collection. Email-Notification is to retrieve the tasks from the task service, then iterate through them to check a for a specific property value in the task data.

Here is the method from task.service.ts:

export class TaskService {

constructor(private http: HttpClient, private messageService: MessageService) {}

getTasks(): Observable<getAllTasksAndInfo[]> {
    return this.http.get<getAllTasksAndInfo[]>(http://localhost:xxxxx/api/task)
        .pipe(
            tap(_=>this.log('fetched tasks')),
        catchError(this.handleError<getAllTasksAndInfo[]>('getTasks', [])));
}

I'm not sure how to check the data at this ^ point, but it's not showing an error.

Here is the code from email-notification that is returning "Undefined":

export class EmailNotificationService{

tasks: getAllTasksAndInfo[];

constructor(private http: HttpClient, private messageService: MessageService, public  taskService: TaskService)
{
    this.getTasks().subscribe(result => this.tasks = result);
}
getTasks(): Observable<getAllTasksAndInfo[]>{
     return this.taskService.getTasks();
}

this.tasks.forEach((task) => {
        console.log(`task: ${JSON.stringify(task)}`);
        }
    });

Here I am getting an error in the console for trying to iterate through and undefined object.

Here is my typescript class:

export class getAllTasksAndInfo {
taskId: number;
stepName: string;
officeName: string;
csrName: string;
taskType: string;
daysActive: number;

}

and here is my API class:

public class GetAllTasksAndInfoDto
{
    public int taskId { get; set; }
    public string stepName { get; set; }
    public string officeName { get; set; }

    public string csrName { get; set; }

    public string taskType { get; set; }

    public int daysActive { get; set; }
}

Any help appreciated. Thank you!

Answer 1

It might be because you have not subscribed to the Observable or the initial data that is the tasks array is preset to undefined

have you tried using rxjs to subscribe to your observable in your EmailNotificationService sometimes it might come in undefined because the initial value of the array is undefined to begin with maybe setting it up with an empty array might help

private tasks: getAllTasksAndInfo[] = [];

constructor(private http: HttpClient, private messageService: MessageService, public  taskService: TaskService)
{
  this.tasks = this.getTasks();
}

getTasks() {
 this.taskService.getTasks().subscribe((tasks: getAllTasksAndInfo[]) => {
   console.log(tasks);
   return tasks;
  });
}