title: Error : Http failure during parsing in Angular
body: <p>I'm learning Angular, I want to display JSON data on HTML page.  The error is Http failure during parsing in Angular. I don't know why please tell me my mistake and give me links how to display JSON data with several types</p>
  
  <p><strong>person.component.html</strong></p>
  
  <pre><code>&lt;ul&gt;
  
   &lt;li *ngFor="let address of addresses"&gt;FirstName:{{ persons.addresses.City }}&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>person.json</p>
  
  <pre><code>[{
          "Addresses": [{ 
  
          "AddressId":101,
          "AddressTypes":["permanent", "temporary", "careof", "native"],
          "Address-L1":"space", 
          "Address-L2":"a.b.road",
          "Locality":"airoli(east)",
          "City":"Mumbai", 
          "State":"Maharashtra",
          "Country":"India",
          "Postalcode":400027
       }],
  
   "ContactNumbers" : 
  [
      {
  
              "ContactID": 1,
              "ContactType": "Home",
              "CountryCode": "+91",
              "RegionCode": "022",
              "Number":2656568965
  
      }]    
  
  }]
  </code></pre>
  
  <p>person-list.service.ts</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { Observable } from 'rxjs/Observable';
  // import 'rxjs/add/operator/do';  // for debugging
  
  export class Address{
    AddressId:number;
    City:string=""; 
  
  }
  /**
   * This class provides the NameList service with methods to read names and add names.
   */
  @Injectable()
  export class PersonListService {
  
    /**
     * Creates a new NameListService with the injected HttpClient.
     * @param {HttpClient} http - The injected HttpClient.
     * @constructor
     */
    constructor(private http: HttpClient) {}
  
    /**
     * Returns an Observable for the HTTP GET request for the JSON resource.
     * @return {string[]} The Observable for the HTTP request.
     */
  
    get(): Observable&lt;Address[]&gt;{
      console.log("Inside the get service")
      return this.http.get('app/person/person.json')
  
                   // .do(data =&gt; console.log('server data:', data))  // debug
                      .catch(this.handleError);
  
    }
  
    /**
      * Handle HTTP error
      */
    private handleError (error: any) {
      // In a real world app, we might use a remote logging infrastructure
      // We'd also dig deeper into the error to get a better message
      const errMsg = (error.message) ? error.message :
        error.status ? `${error.status} - ${error.statusText}` : 'Server error';
      console.error(errMsg); // log to console instead
      return Observable.throw(errMsg);
    }
  }
  </code></pre>
  
  <p><strong>person.component.ts</strong></p>
  
  <pre><code>@Component({
    moduleId: module.id,
    selector: 'sd-person',
    templateUrl: 'person.component.html',
    styleUrls: ['person.component.css']
  })
  export class PersonComponent implements OnInit {
    errorMessage: string;
  
  addresses: Address[]=[];
  constructor(public personListService:PersonListService){}
    ngOnInit() {
       // console.log(jwt.AuthConfig);
       this.getperson();
    }
  
    getperson(){
  
      this.personListService.get()
      .subscribe(
        addresses =&gt; this.addresses = addresses,
        error =&gt; this.errorMessage = &lt;any&gt;error
      );
      console.log(this.persons);
    }
   }
  </code></pre>