title: How to I load JSON data into Angular2 component
body: <p>After running through many tutorials on tinterweb I have finally started to try and build something useful to me using Angular2 and I have come across my first issue.  I cannot seem to load JSON data into my service component.</p>
  
  <p>my people.json file is stored in a folder called data in the top folder.</p>
  
  <p>people.json</p>
  
  <pre><code>"people":[
      { age: 40, name: "Jordan Houston" },
          { age: 38, name: "Robert Eastham" },
          { age: 23, name: "Josh Beh" },
          { age: 23, name: "Joseph Canina" },
          { age: 24, name: "Alexandra Wilkins" },
          { age: 22, name: "Kiersten Costanzo" },
          { age: 23, name: "Ku Sherwood" },
          { age: 25, name: "Arta Halili" },
          { age: 24, name: "Patrick Cooney" },
          { age: 23, name: "Z.A. Perr" },
          { age: 18, name: "Tyler Mulligan" },
          { age: 26, name: "Dennis Dempsey" },
          { age: 32, name: "Francis Yeager" },
          { age: 23, name: "Phil Belardi" }
  ]
  </code></pre>
  
  <p>I believe my issue lies in the friends.service.ts</p>
  
  <p>friend.service.ts</p>
  
  <pre><code>import {Injectable} from 'angular2/core';
  import {Http, HTTP_PROVIDERS} from 'angular2/http';
  
  @Injectable()
  
  export class FriendService { 
  
      friends:Array&lt;any&gt;;
  
      constructor(private http:Http) 
          {
              //console.log("&gt;&gt;friend.service.ts:constructor--")
              http.request('./data/people.json')
                      .subscribe(response =&gt; this.friends = response.json()));
      }
  
          getFriends()
          {
              //console.log("&gt;&gt;friend.service.ts:getFriends--")
              console.log(this.friends)
              return this.friends
          }   
  }
  </code></pre>
  
  <p>friend.service.ts is used within the friend.component.ts</p>
  
  <p>friend.component.ts</p>
  
  <pre><code>import { Component } from 'angular2/core'; 
  import { FriendService } from 'app/friend.service';
  
  @Component({
      selector: 'my-friends',
        providers: [FriendService],
          styles: [`
               div { 
                   background-color:#EFEFEF;
                   margin-bottom:15px;
                   padding:15px;
                   border:1px solid #DDD;
                   box-shadow:2px 2px 2px 0 rgba(0, 0, 0, 0.3);
                  border-radius:3px;
              }
          h2 { 
              text-align: center;
          }
      `],
      template: `
          &lt;h1&gt;Hello from the {{ componentName }}!&lt;/h1&gt;
          &lt;div *ngFor="#f of friends"&gt;
              &lt;h3&gt;Name: {{ f.name }}&lt;/h3&gt; 
              &lt;h4&gt;Age: {{ f.age }}&lt;/h4&gt; 
          &lt;/div&gt;
      `
  })
  
  
  export class FriendComponent {
  
      componentName: 'FriendComponent';
  
          constructor(private _friendService: FriendService) 
          {
          this.friends = _friendService.getFriends();
      }
  } 
  </code></pre>
  
  <p>this lives within main.ts</p>
  
  <p>main.ts</p>
  
  <pre><code>import { Component } from 'angular2/core';
  import { bootstrap } from 'angular2/platform/browser';
  
  import { FriendComponent } from 'app/friend.component';
  import {HTTP_PROVIDERS} from 'angular2/http';
  
  
  @Component({
    selector: 'my-app',
      directives: [FriendComponent],
    styles: [`
    h1 {
      color:#545454;
      background:#02A8F4;
      padding:15px;
      box-shadow:2px 2px 2px 0 rgba(0, 0, 0, 0.3);
    }
    `]
    template: `
    &lt;div&gt;
    &lt;h1&gt;Hello from the {{componentName}}.&lt;/h1&gt;
    &lt;my-friends&gt;&lt;/my-friends&gt;
    &lt;/div&gt;
    `
  })
  export class AppComponent {
    componentName: 'AppComponent'
  }
  
  bootstrap(AppComponent,[HTTP_PROVIDERS])
  </code></pre>
  
  <p>...and here is the index page...</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;script&gt;document.write('&lt;base href="' + document.location + '" /&gt;');&lt;/script&gt;
  
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;!--Add Bootstrap CSS Styles--&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
  
    &lt;!-- IE required polyfills, in this exact order --&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.1/es6-shim.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"&gt;&lt;/script&gt;
    &lt;script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"&gt;&lt;/script&gt;
  
    &lt;!-- Angular polyfill required everywhere --&gt;
    &lt;script src="https://code.angularjs.org/2.0.0-beta.8/angular2-polyfills.js"&gt;&lt;/script&gt;
  
    &lt;script src="https://code.angularjs.org/tools/system.js"&gt;&lt;/script&gt;
    &lt;script src="https://code.angularjs.org/tools/typescript.js"&gt;&lt;/script&gt;
    &lt;script src="https://code.angularjs.org/2.0.0-beta.8/Rx.js"&gt;&lt;/script&gt;
    &lt;script src="https://code.angularjs.org/2.0.0-beta.8/angular2.dev.js"&gt;&lt;/script&gt;
    &lt;script src="https://code.angularjs.org/2.0.0-beta.8/router.dev.js"&gt;&lt;/script&gt;
    &lt;script src="https://code.angularjs.org/2.0.0-beta.8/http.dev.js"&gt;&lt;/script&gt;
  
    &lt;script&gt;
        System.config({
          transpiler: 'typescript', 
          typescriptOptions: { emitDecoratorMetadata: true }, 
          packages: {
            'api': {defaultExtension: 'ts'}, 
            'app': {defaultExtension: 'ts'} 
          } 
        });
      System.import('app/main')
            .then(null, console.error.bind(console));
    &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body class="container"&gt;
  
    &lt;my-app&gt;Loading...&lt;/my-app&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any help would be greatly appreciated ;)</p>