title: Angular2 http.get() ,map(), subscribe() and observable pattern - basic understanding
body: <p>Now, I have an initial page where I have three links. Once you click on the last 'friends' link, appropriate friends Component gets initiated. In there,
  I want to fetch/get list of my friends strored into friends.json file.
  Till now everything works fine. But I'm still a newbie for angular2's HTTP service using RxJs's observables, map, subscribe concept. I've tried to understand it and read few articles but until I get into practical work, I'm not gonna understand those concepts properly.</p>
  
  <p>Here I have already made plnkr which is working except HTTP related work.</p>
  
  <p><a href="http://plnkr.co/edit/MerltjHXlNTKe0RU0NsZ?p=preview">Plnkr</a></p>
  
  <p><strong>myfriends.ts</strong></p>
  
  <pre><code> import {Component,View,CORE_DIRECTIVES} from 'angular2/core';
   import {Http, Response,HTTP_PROVIDERS} from 'angular2/http';
   import 'rxjs/Rx';
   @Component({
      template: `
      &lt;h1&gt;My Friends&lt;/h1&gt;
      &lt;ul&gt;
        &lt;li *ngFor="#frnd of result"&gt;
            {{frnd.name}} is {{frnd.age}} years old.
        &lt;/li&gt;
      &lt;/ul&gt;
      `,
      directive:[CORE_DIRECTIVES]
    })
  
    export class FriendsList{
  
        result:Array&lt;Object&gt;; 
        constructor(http: Http) { 
          console.log("Friends are being called");
  
         // below code is new for me. So please show me correct way how to do it and please explain about .map and .subscribe functions and observable pattern.
  
          this.result = http.get('friends.json')
                        .map(response =&gt; response.json())
                        .subscribe(result =&gt; this.result =result.json());
  
          //Note : I want to fetch data into result object and display it through ngFor.
  
         }
    }
  </code></pre>
  
  <p>Please guide and explain properly. I know it will be so beneficial to lots of new developers.</p>