CanActivate in Angular 2 return undefined

Question

I need that canActivate do not skip further until json loads, for this I put a check if canActivate is not undefined, it returned false, but in the console it outputs that canActivate is passed and with the value undefined. What I'm doing is wrong, I'll be grateful for help, thanks.

My http-data.service

import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
import {Response} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import {CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot} from "@angular/router";

@Injectable()
export class HttpService implements CanActivate{
    constructor(private http: Http) {}

    dataModules = this.getDataModules();
    dataPresets = this.getDataPresets();
    dataModuleItems = this.getDataModuleItems();
    data: any[];

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) : Observable<boolean> | boolean {
            if (this.getDataModules !== undefined) {
                console.log('canActivate');
                console.log(this.getDataModules());
                return true;
            } else return false;
    }

    getDataOrganizations(): Observable<any[]>{
        return this.http.get('http://localhost:3010/data')
            .map((resp:Response)=>{
                let dataOrganizations = resp.json().organization;
                return dataOrganizations;
            });
    }

    loadDataModules(): Observable<any[]> {      
        return this.http.get('http://localhost:3010/data')
            .map((resp: Response)=> {
                let dataModules = resp.json().modules;
                return dataModules;
            });
    }

    loadDataPresets(): Observable<any[]> {      
        return this.http.get('http://localhost:3010/data')
            .map((resp: Response)=> {
                let dataPresets = resp.json().presets;
                return dataPresets;
            });
    }

    loadDataModuleItems(): Observable<any[]> {      
        return this.http.get('http://localhost:3010/data')
            .map((resp: Response)=> {
                let dataModuleItems = resp.json().module_items;
                return dataModuleItems;
            });
    }

    loadData() {
        return this.http.get('http://localhost:3010/data')
            .map((resp: Response)=> {
                let data = resp.json();
                return data;
            });
    }

    getDataModules(): any[] {
        this.loadDataModules().subscribe(((modules)=>{this.dataModules = modules; console.log('в http modules');console.log(this.dataModules);}));
        return this.dataModules;
    }


    getDataPresets(): any[] {
        this.loadDataPresets().subscribe(((presets)=>{this.dataPresets = presets; console.log(this.dataPresets);}));
        return this.dataPresets;
    }


    getDataModuleItems(): any[] {
        this.loadDataModuleItems().subscribe(((moduleItems)=>{this.dataModuleItems = moduleItems; console.log(this.dataModuleItems);}));
        return this.dataModuleItems;
    }
}

] 2

Answer 1

Until you subscribe to the response your data will be undefined

 getDataOrganizations(): Observable<any[]>{
    let dataOrganizations :any[]
        return this.http.get('http://localhost:3010/data')
            .map(response => response.json().organization)
            .subscribe(data =>  {       
                dataOrganizations = data;
                return dataOrganizations; 
        });
    }

Now you will get the object