required help to fixe http get

app.component.ts

import {Component} from 'angular2/core';
import {Hero} from './hero';
import {HeroDetailComponent} from './hero-detail.component';
import {HeroService} from './hero.service';
import {OnInit} from 'angular2/core';
//import {HttpSample} from './Http'

@Component({
    selector: 'my-app',
    template: `<h2>My Heroes</h2>
<ul class="heroes">
  <li *ngFor="#hero of heroes" [class.selected]="hero === selectedHero" (click)="onSelect(hero)">
  <span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul> 
 <my-hero-detail [hero]="selectedHero"></my-hero-detail> 
 <h1>Making Http Requests</h1>

<div class="alert alert-success" role="alert">
    List of just friends loaded successfully
</div>
<div *ngFor="#friend of result.friends">
    {{friend}}
</div>
 `,
styles:[`
  .heroes {list-style-type: none; margin-left: 1em; padding: 0; width: 10em;}
  .heroes li { cursor: pointer; position: relative; left: 0; transition: all 0.2s ease; }
  .heroes li:hover {color: #369; background-color: #EEE; left: .2em;}
  .heroes .badge {
    font-size: small;
    color: white;
    padding: 0.1em 0.7em;
    background-color: #369;
    line-height: 1em;
    position: relative;
    left: -1px;
    top: -1px;
  }
  .selected { background-color: #EEE; color: #369; }
`],
directives: [HeroDetailComponent],
providers: [HeroService]

})
export class AppComponent implements OnInit{ 
    public selectedHero: Hero;
    public heroes: Hero[];
        result: Object;
    
    constructor(private _heroService: HeroService) { }
    
    onSelect(hero: Hero) { this.selectedHero = hero; }
    
    ngOnInit() {
    this.getHeroes();
    this.getFriends();
  }
    
    getHeroes() {
        
        this._heroService.getHeroes().then(heroes => this.heroes = heroes);
  }
  getFriends(){
          this.result = {friends:[]};
      this.result  =this._heroService.loadFriendsSuccessFully().subscribe(res => this.result = res);
  }
}

 

friend.json

{
    "friends":["Joe","Tim","Jim","Jane"]
}

hero-service.ts

import {HEROES} from './mock-heroes';
import {Injectable} from 'angular2/core';
import {Http,Response, HTTP_PROVIDERS} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map'

@Injectable()
export class HeroService {
    result: Object;
    combined: any;
    data:string[];
    error: Object;
    http: Http;
    contract: any;
    customer: any;
    constructor( http: Http)
    {
      this.http = http;
         this.loadFriendsSuccessFully()
    }
    getHeroes() {
        return Promise.resolve(HEROES);
  }
    loadFriendsSuccessFully(){
         this.result = {string:[]};
        this.http.get('http://localhost:3000/App/friends.json').map((res: Response) => res.json()).subscribe(res => this.result = res);
       return this.result;
    }
}