title: Angular2 cast a json result to an interface
body: <p>Using Angular2 and typescript, I have JSON returned from a webApi and I need to get it into an array of a certain type.  I can't figure out how to cast the json to the interface I need.</p>
  
  <p>My type is this interface:</p>
  
  <pre><code>export interface Country {
      Id: number;
      Name: string;
  }
  </code></pre>
  
  <p>My mock returns this array:</p>
  
  <pre><code>export var COUNTRIES: Country[] = [
      { "Id": 11, "Name": "US" },
      { "Id": 12, "Name": "England" },
      { "Id": 13, "Name": "Japan" }
  ];
  </code></pre>
  
  <p>Here is my code:
  country.service.ts</p>
  
  <pre><code>@Injectable()
  export class CountryService {
      private _http = null;
  
      constructor(http: Http) {
          this._http = http;
      }
  
      getCountries() {
          return Promise.resolve(COUNTRIES);
      }
  }
  </code></pre>
  
  <p>Then I call it with this:</p>
  
  <pre><code>export class CountryPickerComponent {
      public countries: Country[];
  
      constructor(private _countryService: CountryService) { }
  
  
      getCountries() {
          this._countryService.getCountries().then(data =&gt; this.setData(data));
      }
  
      setData(data) {
          //this.countries = data;
          this.countries = JSON.parse(data);
          var q = 1;
      }
  
      ngOnInit() {
          this.getCountries();
      }
  }  
  </code></pre>
  
  <p>As you can see, I have a class variable called countries that is an array of the Country interface.  This works as expected.  (I know I don't need that setData method - it's for debugging)</p>
  
  <p>Next, I changed the service to a wepApi call which returns this json.</p>
  
  <pre><code>"[{"name":"England","id":1},{"name":"France","id":2}]"
  </code></pre>
  
  <p>I changed the getCountries method in the service to:</p>
  
  <pre><code>getCountries() {
      return new Promise(resolve=&gt;
          this._http.get('http://localhost:63651/Api/membercountry')
              .subscribe(data =&gt; resolve(data.json()))
      );
  }
  </code></pre>
  
  <p>Using JSON.parse, I convert this to an array which I can then use in angular2.  It works.  It creates the array with the data.  But it's not an array implementing the Country interface.</p>
  
  <p>Notice that the field names from the JSON are all lower case, but the interface properties starts with an uppercase and I coded to the interface.  As a result, when I got the real json it does not work.  Is there a way to 'cast' this to the interface, which should throw an error and let me know something is wrong?  </p>
  
  <p>Many examples use map in the get as shown below:</p>
  
  <pre><code>  getCountries() {
          var retVal;
  
          return new Promise(resolve=&gt;
              this._http.get('http://localhost:63651/Api/membercountry')
                  .map(ref =&gt; ref.json())
                  .subscribe(data =&gt; resolve(data.json()))
          );
      }
  </code></pre>
  
  <p>I can't find documentation on this.  When I try it I never get data but there is no error.  No compile error and no runtime error.</p>