title: How to extract JSON data from http.get in Angular 2 properly?
body: <p>I can't seem to manage to make a variable for the view with the info from a json file but I'm so close. I can echo out the information in the <code>.subscribe()</code>-chain, but it won't set it to a variable, they just get undefined, what am I doing wrong?</p>
  
  <p>I just want to load my json file into a variable in the component view. It was easy in Angular 1.</p>
  
  <p>My service:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, Response, Headers, RequestOptions } from '@angular/http';
  import 'rxjs/add/operator/map';
  import {Observable} from 'rxjs/Rx';
  
  @Injectable()
  export class GullkornService { 
  result: any;
  
  constructor(private http:Http) {
  }
  
  getGullkorn()  {
  
  let result = this.result;
  this.http.get('./gk/gullkorn.json')
  .map(res =&gt; res.json())
  .subscribe(
          val =&gt; this.result = val,
          err =&gt; console.error(err),
          () =&gt;  console.log(this.result));  // this one echoes out what i want
          console.log(this.result); // but this one doesnt, so i cant return it 
        }
  }
  </code></pre>
  
  <p>And the landing component: </p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import {Router, RouterOutlet} from '@angular/router';
  import { HttpModule, JsonpModule } from '@angular/http';
  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule }      from '@angular/core';
  import { GullkornService } from '../../gullkorn-service.service';
  import { FormsModule }   from '@angular/forms';
  import {Observable} from 'rxjs/Observable';
  
  import "gsap";
  declare var ease, TimelineMax,TweenMax,Power4,Power1,Power2,Power3,Bounce, Elastic:any;
  
  @Component({
    selector: 'gullkorn-visning',
    providers: [GullkornService],
    templateUrl: './landing.component.html',
    styleUrls: ['./landing.component.css']
  })
  export class LandingComponent implements OnInit {
    gullkorn: any;
    constructor(GullkornService: GullkornService) { 
          this.gullkorn = GullkornService.getGullkorn();
          console.log(this.gullkorn);
    }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>Based on current code this is what I get:</p>
  
  <p><a href="https://i.stack.imgur.com/PL1va.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PL1va.jpg" alt="result"></a></p>
  
  <p>I have the project here: <a href="https://github.com/ekstremedia/eks-app-2017/blob/master/src/app/gullkorn-service.service.ts" rel="nofollow noreferrer">github</a>.</p>