title: Display data from a json object array
body: <p>I am unable to loop through a json object array and display all data in separate divs. 
  Currently just using some mock data.</p>
  
  <p>Team.servie.ts:</p>
  
  <pre><code>import { Http } from '@angular/http';
  import { Observable } from 'rxjs/Rx';
  import { Injectable } from '@angular/core';
  import { Team } from './team';
  
  @Injectable()
  export class TeamService {
      private _url = "http://jsonplaceholder.typicode.com/posts"
      constructor(private _http: Http){
  
      }
  
      getPost() : Observable&lt;Team[]&gt;{
          return this._http.get(this._url)
          .map(res =&gt; res.json());
      }
  
      createPost(post: Team){
          return this._http.post(this._url, JSON.stringify(post))
          .map(res =&gt; res.json());
      }
  }
  </code></pre>
  
  <p>Component.ts:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { TeamService } from '../team.service';
  
  
  @Component({
    selector: 'About',
   templateUrl: './about.component.html',
   providers: [TeamService]
    })
  export class AboutComponent  implements OnInit{
  
     data;
  
  
     isLoading = true;
  
          constructor(private _teamService: TeamService){
          /*this._teamService.createPost({userId: 1, title: "a", body: "b"});*/
          }
  
              ngOnInit(){
  
                  var text = "";
                      var i = 0;
  
                      this._teamService.getPost()
                  .subscribe(post =&gt; { 
  
                      this.isLoading = false;
                      this.data = post;
                      console.log(post[0]);
                  });
              }
  }
  </code></pre>
  
  <p>Team.ts</p>
  
  <pre><code>export interface Team{
      userId: number;
      id?: number;
      title: string;
      body: string;
  }
  </code></pre>
  
  <p>component.html:</p>
  
  <pre><code>&lt;div *ngIf="isLoading"&gt;Getting data....&lt;/div&gt;
  
  
  &lt;div let displayData of data&gt;
  
      &lt;p&gt; {{ displayData.id }}&lt;/p&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I know I am missing something, but i can't figure out what. </p>
  
  <p>Any tips would be greatly appreciated.</p>