Angular2 http.get() ,map(), subscribe() and observable pattern - basic understanding
<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>