title: Response is undefined
body: <p>I've followed the Heroes tutorial and I am now attempting to retrieve my hero data from an MVC web api rest service.  I have modified the <code>GetHeroes()</code> method in my hero.service:</p>
  
  <pre><code>import 'rxjs/add/observable/of';
  import 'rxjs/add/operator/map';
  import { Injectable } from '@angular/core';
  import { Observable } from 'rxjs/Rx';
  
  import { HttpClient } from '@angular/common/http';
  
  export class Hero {
    constructor(public Id: number, public HeroName: string, public Location: string) { }
  }
  
  @Injectable()
  export class HeroService {
  
    constructor(private http: HttpClient) { }
  
    results: Observable&lt;string[]&gt;;
  
    private location: string;
  
    getHeroes(): Observable&lt;Hero[]&gt; {
        return this.http.get('http://localhost:50125/api/heroes')
            .map((response: Response): Hero[] =&gt; JSON.parse(response['_body']))
            .catch(error =&gt; Observable.throw(error));
    }
  
    getHero(id: number | string) {
      return this.getHeroes()
        // (+) before `id` turns the string into a number
        .map(heroes =&gt; heroes.find(hero =&gt; hero.Id === +id));
  
    }
  
  }
  </code></pre>
  
  <p>I am calling the service method from my component:</p>
  
  <pre><code>import 'rxjs/add/operator/switchMap';
  import { Observable } from 'rxjs/Observable';
  import { Component, OnInit } from '@angular/core';
  import { ActivatedRoute, ParamMap } from '@angular/router';
  
  import { Hero, HeroService } from './hero.service';
  
  @Component({
    template: `
      &lt;h2&gt;HEROES&lt;/h2&gt;
      &lt;ul class="items"&gt;
        &lt;li *ngFor="let hero of heroes$ | async"
          [class.selected]="hero.Id === selectedId"&gt;
          &lt;a [routerLink]="['/hero', hero.Id]"&gt;
            &lt;span class="badge"&gt;{{ hero.Id }}&lt;/span&gt;{{ hero.HeroName }}
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    `
  })
  export class HeroListComponent implements OnInit {
    heroes$: Observable&lt;Hero[]&gt;;
  
    private selectedId: number;
  
    constructor(
      private service: HeroService,
      private route: ActivatedRoute
    ) {}
  
    ngOnInit() {
      this.heroes$ = this.route.paramMap
        .switchMap((params: ParamMap) =&gt; {
          // (+) before `params.get()` turns the string into a number
          this.selectedId = +params.get('id');
          return this.service.getHeroes();
        });
    }
  
  }
  </code></pre>
  
  <p>My Heroes api controller looks like this:</p>
  
  <pre><code>using HeroesService.Models;
  using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Net;
  using System.Net.Http;
  using System.Web.Http;
  using Newtonsoft.Json;
  
  namespace HeroesService.Controllers
  {
      public class HeroesController : ApiController
      {
          // GET: api/Heroes
          public List&lt;Hero&gt; Get()
          {
              List&lt;Hero&gt; heroes = new List&lt;Hero&gt;();
  
              Hero superman = new Hero();
              superman.Id = 10;
              superman.HeroName = "Superman";
              superman.Location = "Los Angeles, California";
              heroes.Add(superman);
  
              Hero batman = new Hero();
              batman.Id = 11;
              batman.HeroName = "Batman";
              batman.Location = "Chicago, Illinois";
              heroes.Add(batman);
  
              return heroes;
          }
      }
  }
  </code></pre>
  
  <p>I can see data in the Chrome's Network tab that looks like this:</p>
  
  <pre><code>[{"Id":10,"HeroName":"Superman","Location":"Los Angeles, California"},{"Id":11,"HeroName":"Batman","Location":"Chicago, Illinois"}]
  </code></pre>
  
  <p>Unfortunately, I get an error that looks like this (probably means the response data is undefined):</p>
  
  <blockquote>
    <p>ERROR SyntaxError: Unexpected token u in JSON at position 0
        at JSON.parse ()
        at MapSubscriber.eval [as project] (hero.service.ts:34)
        at MapSubscriber._next (map.ts:75)
        at MapSubscriber.Subscriber.next (Subscriber.ts:95)
        at MapSubscriber._next (map.ts:80)
        at MapSubscriber.Subscriber.next (Subscriber.ts:95)
        at FilterSubscriber._next (filter.ts:95)
        at FilterSubscriber.Subscriber.next (Subscriber.ts:95)
        at MergeMapSubscriber.notifyNext (mergeMap.ts:151)
        at InnerSubscriber._next (InnerSubscriber.ts:17)</p>
  </blockquote>