Angular2 parsing HTTP response
<p>I have modified the quickstart tutorial to get a collection of Posts from the following URL: <a href="https://jsonplaceholder.typicode.com/posts" rel="nofollow">https://jsonplaceholder.typicode.com/posts</a>, but I only see the default initialization values, not the actual values from the server.</p>

<p>One of the elements looks like:</p>

<pre><code>  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  }
</code></pre>

<p>This object is represented as a Post class defined below:</p>

<pre class="lang-js prettyprint-override"><code>export class Post
{
    userId: number;
    id: number;
    title: string;
    body: string;
 }
</code></pre>

<p>The service returns an Observable of Post[]</p>

<pre class="lang-js prettyprint-override"><code>import { Post } from './post'

@Injectable()
export class PostService{
    private postUrl = 'https://jsonplaceholder.typicode.com/posts';

    constructor (private http: Http) {}

    public getPosts (): Observable&lt;Post[]&gt; {
    return this.http.get(this.postUrl)
                    .map(this.extractData);

    }

    private extractData(res: Response) {
    let body = res.json();
    return body.data || { };
    }
</code></pre>

<p>And the Component subscribes to the Observable to obtain the array and set its attribute:</p>

<pre class="lang-js prettyprint-override"><code>import { Post } from './post'
import { PostService } from './postservice.service'

@Component({
    selector:'mi-comp',
    template: `&lt;h1&gt;Embedded Component&lt;/h1&gt;

        &lt;ul&gt;
        &lt;li *ngFor="let post of posts"&gt;
        {{post.id }}  {{post.title }} 
        &lt;/li&gt;
        &lt;/ul&gt;
    `,
    providers: [PostService]
})

export class MiComponente
{
    posts: Post[] =   

     [{
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio            reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
  },
  {
    "userId": 1,
    "id": 3,
    "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
    "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
  }];

    errorMessage: string;
    counter = 0;

    constructor(private postService: PostService){

    this.postService.getPosts()
                            .subscribe(
                            posts =&gt; this.posts = posts,
                            error =&gt; this.errorMessage = &lt;any&gt;error);   
}
</code></pre>

<p>If I change the extract function of the service so as to return body.data, I see the default values for one second, and then empty. I have debugged the response and I can see the 100 element array there.</p>

<p>Additionally, if I change everything from Post to string, I can see a list of 100 objects on the screen.</p>