Question

我正在学习Angular，我想在HTML页面上显示JSON数据。在Angular中解析期间，错误是Http失败。我不知道为什么请告诉我我的错误并给我链接如何显示几种类型的JSON数据

person.component.html

<ul>

 <li *ngFor="let address of addresses">FirstName:{{ persons.addresses.City }}</li>
</ul>

person.json

[{
        "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

    }]    

}]

人-list.service.ts

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<Address[]>{
    console.log("Inside the get service")
    return this.http.get('app/person/person.json')

                 // .do(data => 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);
  }
}

person.component.ts

@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 => this.addresses = addresses,
      error => this.errorMessage = <any>error
    );
    console.log(this.persons);
  }
 }

Answer 1

这是技术上无效的JSON，因为在＆＃34;孟买＆＃34;

之后有逗号。

应该是

[{"Addresses": [{ 
        "AddressId":101,
        "City":"Mumbai" 
         }]
}]

修改

在更新之后，这也是无效的，因为它需要包装在一个对象中，如下所示：

{ "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 }] }

这将创建一个包含2个数组的对象：＆＃34;地址＆＃34;和＆＃34; ContactNumbers＆＃34;

Answer 2

在 person-list.service.ts 文件中，将响应转换为JSON。

将响应映射到JSON。

return this.http.get('app/person/person.json')
    .map(response => response.json())
    // .do(data => console.log('server data:', data))
    .catch(this.handleError);

否则您可以转换组件本身的响应。

错误：在Angular中解析期间出现Http失败

2 个答案: