Unable to get single property from response Angular 2 - asp.net-mvc

Question

I want to access the property 'Status' from the controller and simply do some operations but I am unable to get this property and do any further operation. I am sharing my code below:
TasksController:
[HttpGet]
public ActionResult GetTasks()
{
var q = (from a in db.Tsk
join b in db.TType on a.TaskTypeID equals b.TaskTypeID
join c in db.Prior on a.PriorityID equals c.PriorityID
join d in db.Usr on a.AssignedTo equals d.Employees.EmpName
select new
{
a.TaskID,
a.TaskCode,
a.AssignedTo,
a.Date,
a.DueDate,
a.Status,
a.Reply,
a.PriorityID,
a.TaskTypeID,
b.TaskType,
c.Priorities,
d.Login
}).ToList().Skip(1).AsEnumerable();
db.Configuration.ProxyCreationEnabled = false;
return Json(q, JsonRequestBehavior.AllowGet);
}
AppService:
import { Injectable } from '#angular/core';
import { Http, Headers, Response } from '#angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
import { Observable } from 'rxjs/Observable'
#Injectable()
export class AppService {
constructor(private _http: Http) { }
//Task Register
getFTRs(c: string) {
return this._http.get('Tasks/GetTasks').map(res => res.json().filter(a => a.Login === c));
}
}
HomeComponent:
import { Component, OnInit, Input } from '#angular/core';
import { AuthenticationService } from '../_services/index';
import { AppService } from '../app.service';
import { LoginComponent } from '../login/index';
import { User, TaskRegisters } from '../contract';
import { Message } from '../message';
#Component({
moduleId: module.id,
selector: 'home',
templateUrl: 'home.component.html',
providers: [LoginComponent]
})
export class HomeComponent implements OnInit {
users: User[];
tasks: string;
msgs: Message[] = [];
curr: any;
constructor(private userService: AuthenticationService,
private Tsk: AppService,
private Log: LoginComponent) { }
ngOnInit() {
debugger;
this.curr = localStorage.getItem('currentUser').slice(1);
this.Tsk.getFTRs(this.curr).subscribe(
res => {
this.tasks = res.Status,
error => console.log(error)
});
if (this.tasks) {
this.msgs.push({ severity: 'error', summary: 'Task Assigned', detail: 'A new task has been assigned to you' })
}
}
}
Status is a boolean and if boolean is true, I want to push the message in msgs array. I am unable to get the value of Status and store it in tasks variable of home component. Whenever I run the program it shows this.tasks as undefined thus making and comparison impossible. Any help will be appreciated.

Answer 1

Change:
this.Tsk.getFTRs(this.curr).subscribe(
res => {
this.tasks = res.Status,
error => console.log(error)
});
if (this.tasks) {
this.msgs.push({ severity: 'error', summary: 'Task Assigned', detail: 'A new task has been assigned to you' })
}
to
this.Tsk.getFTRs(this.curr).subscribe(
(res) => {
console.log(res); //What does this print?
this.tasks = res.Status;
console.log(this.tasks); //What does this print?
if (this.tasks) {
this.msgs.push({ severity: 'error', summary: 'Task Assigned', detail: 'A new task has been assigned to you' })
}
},
(error) => {console.log(error);}
);
Since you're assingning this.tasks inside getFRSs' callback which is async, by the time you are using it below in the if statement it is undefined.

Answer 2

Since this.tasks is available to me now after the edit of #echonax I did this to make it work!
ngOnInit() {
debugger;
this.curr = localStorage.getItem('currentUser').slice(1);
this.Tsk.getFTRs(this.curr).subscribe(
res => {
this.tasks = res;
for (let i = 0; i < this.tasks.length; i++){
if (this.tasks[i].Status) {
this.msgs.push({ severity: 'error', summary: 'Task Assigned', detail: 'A new task has been assigned to you' })
}
}
},
error => console.log(error)
)}