使用Angular2和typescript,我有一个从webApi返回的JSON,我需要把它变成一个特定类型的数组。我不知道如何将json转换到我需要的界面。
我的类型是这个界面:
- export interface Country {
- Id: number;
- Name: string;
- }
我的mock返回这个数组:
- export var COUNTRIES: Country[] = [
- { "Id": 11,"Name": "US" },{ "Id": 12,"Name": "England" },{ "Id": 13,"Name": "Japan" }
- ];
这是我的代码:
country.service.ts
- @Injectable()
- export class CountryService {
- private _http = null;
- constructor(http: Http) {
- this._http = http;
- }
- getCountries() {
- return Promise.resolve(COUNTRIES);
- }
- }
然后我用这个叫它:
- export class CountryPickerComponent {
- public countries: Country[];
- constructor(private _countryService: CountryService) { }
- getCountries() {
- this._countryService.getCountries().then(data => this.setData(data));
- }
- setData(data) {
- //this.countries = data;
- this.countries = JSON.parse(data);
- var q = 1;
- }
- ngOnInit() {
- this.getCountries();
- }
- }
如你所见,我有一个类变量,称为国家,它是一个国家界面的数组。这样可以预期。 (我知道我不需要setData方法 – 这是为了调试)
接下来,我将服务更改为一个返回此json的wepApi调用。
- "[{"name":"England","id":1},{"name":"France","id":2}]"
我将服务中的getCountries方法更改为:
- getCountries() {
- return new Promise(resolve=>
- this._http.get('http://localhost:63651/Api/membercountry')
- .subscribe(data => resolve(data.json()))
- );
- }
使用JSON.parse,我将其转换为一个数组,然后我可以在angular2中使用。有用。它使用数据创建数组。但是它不是一个实现Country接口的数组。
请注意,JSON中的字段名称都是小写字母,但是接口属性以大写开头,并将其编码到接口。结果,当我得到真正的json它不工作。有没有办法将这个“投射”到界面,这会引起错误,让我知道有些错误?
很多例子使用map中的map,如下图所示:
- getCountries() {
- var retVal;
- return new Promise(resolve=>
- this._http.get('http://localhost:63651/Api/membercountry')
- .map(ref => ref.json())
- .subscribe(data => resolve(data.json()))
- );
- }
您可以对由JSON.parse创建的对象所期望的接口进行类型断言。
- this.http.get('http://localhost:4200/').subscribe((value: Response) => {
- let hero = <ServerInfo>value.json();
- });
但是,如果由于两个原因,服务器发送坏对象,则不会导致任何错误。
在编译时,transpiler不知道服务器将发送什么。
在运行时,所有类型的信息都被擦除,因为一切都被编译成了JavaScript的。